I must be missing something simple. While editing a plain Wordpress template I decided to add a background image to the header. I need the image to scale with the responsive design so I set my max-width to 100% and height to auto.. nothing displays. If I set the background to fixed dimensions that match the images native size (700 x 220) then all is good, unless I scale the site down or view on a mobile device. Please help! For reference, the site is portlandtoraleigh.com Thanks!
CSS:
.left-header{
background: url(images/headerimage.png) no-repeat;
max-width: 100%;
height: auto;
}
HTML:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '—', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php do_action( 'before' ); ?>
<div class="left-header">
</div>
<div id="comeon">
<nav class="site-navigation main-navigation" role="navigation">
<h1 class="assistive-text"><?php _e( 'Menu', 'semprul' ); ?></h1>
<div class="assistive-text skip-link"><a href="#content" title="<?php
esc_attr_e( 'Skip to content', 'semprul' ); ?>"><?php _e( 'Skip to content',
'semprul' ); ?></a></div>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- .site-navigation .main-navigation -->
</div>
</header><!-- #masthead .site-header -->
<div class="clear"></div>
<div id="main" class="site-main">
It seems that you are doing this the more difficult method. Try this:
<img class="left-header" src="filepath/image.png" />
then
.left-header {
width:100%;
max-width:100%;
height:auto
}
Simple!
CSS
background-size:contain;
Hope I was helpful :)
EDIT: You may choose to use:
background-position: center center;
to center the background image both horizontally and vertically.
On side note, if your image does not display, try to add quotation marks in-between the parentheses; so:
url('pathtoimage/image.png');
Related
I've searched high and low for the Materialize UI equivalent of this (example in lighter weight MUI CSS): -
https://www.muicss.com/docs/v1/example-layouts/responsive-side-menu
For example on a desktop sould look like this (with ability to show / hide menu via burger icon): -
But on a mobile would look like this: -
I kept at it and came up with something using the documentation (http://materializecss.com/side-nav.html).
I've attached the HTML, CSS + JavaScript below if anyone is interested.
NOTE: In my answer there is no burger when viewed at a desktop size i.e. no ability to hide the menu. I discovered that if I removed the hide-on-large-only attribute on the following <a> then it put a menu over the top of the existing menu.
<i class="material-icons">menu</i>
Also, when clicking out of the menu it disappeared completely! :-)
Ideally it would be nice to have the burger in the desktop size so the menu can be hidnen if necessary but happy enough with this solution TBH.
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 300
edge: 'left', // Choose the horizontal origin
closeOnClick: false, // Closes side-nav on <a> clicks, useful for Angular/Meteor
draggable: true // Choose whether you can drag to open on touch screens
});
#container {
padding-left: 300px;
}
#content {
padding: 20px;
}
#media only screen and (max-width : 992px) {
#container {
padding-left: 0px;
}
}
<!-- JQuery / Materialize CSS + JavaScript imports -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<!-- HTML -->
<div id="container">
<div id="menu">
<ul id="slide-out" class="side-nav fixed show-on-large-only">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Dropdown<i class="material-icons">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div id="content">
<i class="material-icons">menu</i>
<h3>Simple Materialize Responsive Side Menu</h3>
<p>Resize browser to see what it looks like in (a) brwoser (b) mobile devices</p>
</div>
</div>
Is there a way (preferably simple way)
wither in CSS twick or Jquery function to disable swipe finger touch on mobile only?
my case is that I have Bxslider enabled on a website
but on mobile I break down the float with CSS to show all slides (8) at once in a static way.
the problem is that the function is still running and when I swipe my fingers over the slider, even if it doesn't look like a slider anymore it moves the block of photos out of the viewport.
Anyway to just stop the swipe thing in mobile somehow?
Thanks
Have you tried touchEnabled: false?
Also oneToOneTouch: false for good measure.
$(function () {
var ss = $('.slideshow').bxSlider({
touchEnabled: false,
oneToOneTouch: false
});
});
.shell {
max-height: 300px;
max-width: 400px;
}
img {
margin: 0 auto;
}
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<section class="shell">
<ul class="slideshow">
<li>
<img src="http://placehold.it/666x375/000/Fff.png&text=FIRST" />
</li>
<li>
<img src="http://placehold.it/800x450/048/Fee.png&text=SECOND" />
</li>
<li>
<img src="http://placehold.it/720x404/fa8/375.png&text=THIRD" />
</li>
<li>
<img src="http://placehold.it/520x303/9a7/a10.png&text=FOURTH" />
</li>
<li>
<img src="http://placehold.it/640x360/fd3/b0d.png&text=FIFTH" />
</li>
<li>
<img src="http://placehold.it/480x270/fff/000.png&text=LAST" />
</li>
</ul>
</section>
how i add text in p tag?
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 350px;"><span id="cke_44" class="cke_voice_label">Press ALT 0 for help</span>
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" src="" style="width: 100%; height: 100%;" title="Rich Text Editor, editor2" aria-describedby="cke_106" tabindex="0" allowtransparency="true">
<html lang="en" dir="ltr">
<head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="true">
<p>
<br type="_moz">
</p>
</body>
</html>
</iframe>
</div>
i use this code but the give error
var p = element(by.css('.cke_editable p'));
p.sendKeys('This is a peragraph tag');
You'll need to switch to the iframe's page context to do this:
browser.switchTo().frame($('.cke_wysiwyg_frame'))
var p = element(by.css('.cke_editable p'));
p.sendKeys('This is a peragraph tag');
// switch back to the "parent page" context
browser.switchTo().defaultContent()
I am using the flexslider with angularjs, so the examples form the website with jquery are not really helpful. So I have implemented the slider:
HTML
<div>
<flex-slider flex-slide="image in product.imagePaths track by $index" animation="slide" control-nav="thumbnails">
<li data-thumb="{{imagesUrl}}{{image.thumbnail}}">
<img ng-src="{{imagesUrl}}{{image.custom}}">
</li>
</flex-slider>
</div>
in the js I get an array of objects that consist of three strings each(paths for original, custom size and thumb)
and have overwritten CSS for size:
.flexslider {
width: 400px;
height: 400px;
}
.flexslider .slides img {
width: 400px;
height: 400px;
}
.flex-direction-nav a {
line-height: 40px;
}
I have 12 thumbnails, clicking them works fine, does exactly what they are supposed to do; the problem is that they are all visible, shown on three rows. I have added the requested classes:
<link rel="stylesheet" href="/Content/flexslider/flexslider.css" />
and scripts:
<script src="/Scripts/jquery-2.1.3.js"></script>
<script src="/Scripts/jquery.flexslider.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-flexslider.js"></script>
don't know what else to do, and I find documentation (examples) for angular very poor. Can anyone please help? spent already a day on it...
EDIT
plunker for demo: http://plnkr.co/edit/gWtik8Q3qXhQjlyjhoRD
SECOND EDIT
ok, I have found a plunker with a working carousel for thumbnails, but it basically builds two flex sliders. is this the only way? when in the example on git (https://github.com/thenikso/angular-flexslider/blob/master/examples/thumbnail-controlnav.html) they use my version? plunker: http://plnkr.co/edit/K4VBoSqCAFbr1Fps0JJr
See the Plunker I created. This is a modification of your Plunker attached. Per the implementation, jQuery or not, you need to split the images and the thumbnail. http://plnkr.co/edit/kTSQuJfi5OmOSw6cU06x?p=preview
<div id="container" ng-controller="MainCtrl">
<div class="col-sm-12">
<flex-slider slider-id="slider" flex-slide="image in prod.imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100">
<li>
<img ng-src="{{image.custom}}">
</li>
</flex-slider>
</div>
<div class="col-sm-12">
<flex-slider slider-id="carousel" flex-slide="image in prod.imagePaths track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false">
<li>
<img ng-src="{{image.thumbnail}}">
</li>
</flex-slider>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<body class="layout-two-column unibet uMyAccount">
<div class="tooltip-container">
<div id="tooltip" class="tooltip tooltip-error right-center" style="top: 466px; left: 709px; display: none;">
<div class="tooltip-content gutter-3 icon icon-small icon-error">DANISH SITE SPECIFIC</div>
<div class="tooltip-pointer"></div>
<div class="tooltip-pointer-decoration"></div>
</div>
</div>
<div id="window">
<div id="container" class="lobby-theme-3">
<header id="header">
<nav id="nav-main">
<div id="no-sub-nav"></div>
<div id="main" role="main">
<div class="stack-wrap gutter-col-wrap-2">
Tried the following to get the text "DANISH SITE SPECIFIC":
//body[contains(#class,'layout-two-column unibet uMyAccount')]//div[contains(#id,'tooltip')]//div[contains(#class,'tooltip-content')]
But the above is not working when tried to get the text through .getText() call. Please help.
This code will work as a charm, keeping your code clean, and avoiding problems if you decide to insert/change the classes inside the element:
WebElement tooltip = driver.findElement(By.id("tooltip"));
String textYouNeed = tooltip.findElement(By.className("tooltip-content")).getText();
Use the below statement to get the tooltip text.
driver.findElement(By.className("tooltip-content.gutter-3.icon.icon-small.icon-error")).getText();
try this it works:)
WebElement tip = driver.findElement(By.className("tooltip-content
gutter-3 icon icon-small icon-error");
String textTip = tip.getText();
System.out.println(textTip);