<div>
<div class="dates">
So, to find the dates class above, I'm using $x("//div[#class= 'dates']//") but console says that this expression is illegal expression.
<div class="bx-wrapper" style="max-width: 870px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 0px;">
<div class="bx-wrapper" style="max-width: 870px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 91px;">
<ul id="DateList" class="bxslider clearfix" data-bx-slider="mode: 'horizontal', pager: false, controls: false, minSlides: 1, maxSlides:4, slideWidth: 290, slideMargin:0, hideControlOnEnd:true, infiniteLoop: false, moveSlides: 1" style="width: 515%; position: relative; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
To find the correct xpath to the above node, I'm using $x("//ul[#id= 'DateList']//") and still got a message that expression is illegal.
<li class="date-block slide ng-scope" data-notify-when-repeat-finished="" ng-repeat="dates in cruiseFinder.filters.sailDates" style="float: left; list-style: outside none none; position: relative; width: 290px;">
<h5 class="ng-binding">2015</h5>
<ul id="months" class="months">
In both cases the last double slash is too many: The right xpaths would be:
//div[#class= 'dates']
//ul[#id= 'DateList']
Double slash into a xpath expression means "in any place of the document".
Related
In all other browsers, these cards (.resort__cards) are correctly spaced. Because the <label> is the same size as the <img> (even though the <img> tag is the child element and the <label> is the parent element.)
But in Firefox the <label> does not obey this size, so the cards overlap.
This happens because the <label> tag is the size of the ORIGINAL <img> (188 x 319px), that is, the <label> tag does not have the size of the <img> tag that I modified (which would be height: 100%).
Does anyone know why this happens?
>Print Chrome<
>Print Firefox<
PS: Sorry for my bad english!
.resorts__cards {
display: flex;
width: 100vw;
height: 55vh;
margin: 50px 0 50px auto;
z-index: 0;
overflow-y: hidden;
overflow-x: scroll;
box-sizing: content-box;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x mandatory;
}
.resorts__cards img {
width: auto;
height: 100%;
margin: 0 20px;
border-radius: 20px;
scroll-snap-align: center;
}
.resorts__1 {
position: relative;
overflow-y: hidden;
height: 100vh;
}
.resorts__2 {
overflow-y: hidden;
position: relative;
height: 100vh;
}
.resorts__3 {
position: relative;
overflow-y: hidden;
height: 100vh;
}
<div class="resorts__cards">
<label for="resorts1">
<img src="https://chi01pap002files.storage.live.com/y4m_b-iLV2IGtXJsxH846loaz8VdbEzeC5JRXnhkr3DESFs2lbjsh9SE5N890gLy7ts1tagl0szlHhkTPzSC4kljYlz5MsnZyKvX8_NksSEP_bhdqqtW_j_yp6Z4-4KkJ41f6Hm0R6HcdWdOgis4172b3RsscYULK7t-zF64yd70gZoU6fBhieAJqxY82FOfz21?width=188&height=319&cropmode=none" alt="video lux"/>
</label>
<label for="resorts2">
<img src="https://chi01pap002files.storage.live.com/y4mFUVIFs2d7rBVSQng4PvGOuEAjfc9ddKfnEkN-Jt6imdinCeRhmFpgkGZwpDnpDhMW_RsfoZXNhJrxFPe5sk3Y-JB50HxXIYT-i6JT4HddJ8LoNhbNEcobtoBbyZOzhT7lLjrhovkCKnVGAWmI9VjrzGQw9RqcGY1xUTF-9fVU2-rYD3WZCCJ-aBECzLZFOsY?width=188&height=319&cropmode=none" alt="Six Senses"/>
</label>
<label for="resorts3">
<img src="https://chi01pap002files.storage.live.com/y4m4nMmzNd1FnSHpMzcIh_ysk5xUOtQvQ0W9acJ-pmrEfmnPSS8rgz71W252EJffuDnWoo46-BVz-RYovckctPV1Evh7SUz3Wu-vP5c62yxEN7Q0FtyiC2odZbVSJojUmTK_AMEEBCIdQWO0-6LJZwfNWzep8Hgu_dSYBF9wa2KezWz4UpMwJ0K7tBUbVW2t0KW?width=188&height=319&cropmode=none" alt="Ayada"/>
</label>
</div>
I am using customized check box icheck in JQ Grid edit and add form but checkbox element is not getting posted to the server even it is checked.
Here is the generated markup for the form:
`<td class="CaptionTD">
Status
</td>
<td class="DataTD">
<div style="position: relative;" id="userGroupBean.isActive_icheck" class="icheckbox_square-green checked">
<input title="" style="position: absolute; opacity: 0;" class="FormElement" role="checkbox" name="userGroupBean.isActive" id="userGroupBean.isActive" offval="0" value="1" checked="" type="checkbox">
<ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins>
</div>
</td>`
Right, so I have made a navigation bar and I want to add images before each link, I know I can use a.header:before but I need different images for each link, a house for home, spanner for spec and so on. What is the simplest way of doing this? Is there a way without creating a div for each one and styling them individually?
For a preview of the page so far with the nav - http://zimxtrial.ukbigbuy.com/
One more thing - here is part of the css:
#header-nav {
background-color: #FFFFFF;
height: 80px; height: 8.0rem;
width: 100%;
position: absolute;
top: 50px;
}
.header-nav-center {
height: 80px; height: 8.0rem;
text-align: center;
position: relative;
top: 0px;
width: 500px; width: 50.0rem;
margin-left: auto;
margin-right: auto;
}
.header-nav-center ul {
margin: 0;
}
.header-nav-center ul li {
list-style: none;
margin: 0 35px 0 0;
display: inline;
}
a.header {
line-height: 80px; line-height: 8.0rem;
font-size: 17px; font-size: 1.7rem;
}
And HTML:
<div id="home">
<div id="header-nav">
<div id="hr-nav-top-container">
<hr class="nav" />
</div>
<div id="logo"></div>
<div class="header-nav-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a class="header" href="#features">Features</a>
</li>
<li><a class="header" href="#specification">Specification</a>
</li>
<li><a class="header" href="#contact-us">Contact Us</a>
</li>
</ul>
</div>
<div id="pre-order"></div>
<div id="hr-nav-bottom-container">
<hr class="nav" />
</div>
</div>
</div>
Can I add something like:
a.header.home:before {
background: url('../images/home-logo.png') center center no-repeat;
}
Not that exactly but something like it?
You could make ids for each link and add the ids to the desired link img
This is where the problems for me keeps existing.
Can't seem to figure out what i am doing wrong.
<div class="Flagholder">
<ul class="LangENG" style="position: relative; left: 10%;">
<li style="width: 250px; height: 50px;">
<a href="file://localhost/Users/Andreas/Desktop/Multimedia%20Design/Storcenterapp/en/eng.html" target="_self">
<img src="images/LangENG.png" alt="English" width="50px"></a></li></ul></div>
The CSS as it looks.
.Flagholder {
position: absolute;
overflow: hidden;
left: -5%;
top: 50%;
height: 100%;
width: 100%;
}
.LangENG {
overflow:hidden;
}
ul {
list-style-type: none;
}
.LangENG a {
height:50px;
width:50px;
display: inline-block;
background-repeat: no-repeat;
}
I have been experiment with Malsup's awesome jQuery cycle plugin and have hit a bit of a snag. I have been using mixed content in my transition div which has worked out fine. The problem occurs when I use pager within the transition divs. Essentially I would like the pager links to transition along with each div so I included the pager div within each transition div.
$(document).ready(function() {
$('#slider').cycle ({
fx: 'scrollLeft',
timeout: 10000,
speed: 500,
pager: '#pager'
});
});
IMAGE
TEXT
TEXT
TEXT
Try It Now!Terms & Conditions Apply
a
<!-- Content Display 1 -->
<div id="cs_1" class="show_content clearb">
<div class="">IMAGE</div>
<div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="button gradient3" style="height: 57px; width: 180px; margin-top: 20px;">
<div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div>
</div>
<div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;">b</div>
</div>
<!-- Content Display 1 -->
<!-- Content Display 2 -->
<div id="cs_2" class="show_content clearb">
<div class="">IMAGE</div>
<div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="button gradient3" style="height: 57px; width: 180px; margin-top 26px;">
<div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div>
</div>
<div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;"></div>
</div>
<!-- Content Display 2 -->
<!-- Content Display 3 -->
<div id="cs_3" class="show_content clearb">
<div class="">IMAGE</div>
<div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="button gradient3" style="height: 57px; width: 180px; margin-top 18px;">
<div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div>
</div>
<div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;"></div>
</div>
<!-- Content Display 3 -->
The pager shows up fine on the first slide and transitions out exactly the way I want it to, it does not appear on the following three transitions although the test letters i put in the first two pager divs do. What is it that I am missing here?
Well after a bit more experimentation the fix was surprisingly simple but also had an odd result. All I did was supply a second parm to the pager call:
$(document).ready(function() {
$('#slider').cycle ({
fx: 'scrollLeft',
timeout: 10000,
speed: 500,
pager: '#pager, #pager2'
});
});
I renamed the pager on my second slide to pager2 and voila! However something odd happened, the slider appeared on the two subsequent panels that I had NOT renamed! When there was only one parm in pager they did not appear despite all having been named #pager. Once I added the second parm #pager2, all of the controls named #pager that had not appeared before now seem to be appearing. Removing the second parm reverts it back to the state where only the first set of controls appeared. Odd, but working so I'm not complaining.