The loader is not enabled in my bxslider, how to enable it
bx slider version 1.4
JavaScript code
$(document).ready(function() {
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
pause: 5000,
speed: 2000,
autoStart:false,
preloadImages:'all',
});
});
In Html the list element contain inner elements
<div class="baner-slider">
<ul class="bxslider">
<li>
<span class="baner baner-1 ">
<span class="bg-shadow">
<span class="h1">g</span>
<span class="h4">We es</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-2 ">
<span class="bg-shadow">
<span class="h1">Nd</span>
<span class="h4">edefefe</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-3">
<span class="bg-shadow">
<span class="h1">ry</span>
<span class="h4">Ags .</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-4">
<span class="bg-shadow">
<span class="h1">A</span>
<span class="h4">A Academia.</span>
learn more
</span>
</span>
</li>
</ul>
<div class="arrow" id="arrw">
<img src="img/icons/arrw.png" alt="">
</div>
<div class="event-wrap hidden-xs hidden-sm">
<h4>Visit us at booth #507 at PAG 2017</h4>
</div>
The issue is solved when i added img tag inside li
Thanks to zer00ne for help
Related
I have a fixed menu button that displays the menu items when is clicked. The problem is that when is clicked, it always goes to the top of the page just before the menu is open. I have tried width e.preventDefault(); and e.stopImmediatePropagation() but nothing happens. I think there should be a way to detect the scroll position to keep the menu div sticky at the same position where is open on the page. Also, note that I applied overflow:hidden to the body and HTML to keep them fixed when the menu button is clicked.
$(".nav-mobile-toggle").click(function() {
$("html,body").css("overflow", "hidden");
event.preventDefault();
});
body {
background: #fff;
font-size: 22px;
line-height: 28.6px;
color: #005153;
overflow: hidden !important;
}
html,
body {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-mobile-toggle pt8" data-modal-id data-notification-link="nav-slide">
<div class="btn--menu">
<span class="h6 nombre">Menu</span>
<i class="icon-Align-Right icon icon--sm"></i>
</div>
</div>
<div class="notification pos-right pos-top nav-slide col-sm-4 col-xs-12 bg--primary-1" data-notification-link="nav-slide" data-animation="from-right" id="notification">
<div class="nav-slide__content">
<div class="pt104 text-left">
<ul class="menu">
<li>
<a href="/">
<span class="h3">Inicio</span>
</a>
</li>
<li>
<a href="/el-despacho.php">
<span class="h3">El despacho</span>
</a>
</li>
<li>
<a href="/quienes-somos.php">
<span class="h3">Quiénes somos</span>
</a>
</li>
<li>
<a href="/que-nos-diferencia.php">
<span class="h3">Qué nos diferencia</span>
</a>
</li>
<li>
<a href="/lo-que-opinan.php">
<span class="h3">Qué opinan de nosotros</span>
</a>
</li>
<li>
<a href="/areas-practica.php">
<span class="h3">Áreas de práctica</span>
</a>
</li>
<li>
<a href="/blog">
<span class="h3">Blog</span>
</a>
</li>
<li>
<a href="/contacto.php">
<span class="h3">Contacta con nosotros</span>
</a>
</li>
</ul>
</div>
<div class="pos-absolute pos-bottom menu-footer text-right">
<p class="tel">
123 456 789
</p>
<p class="mail">
info#example.com
</p>
</div>
</div>
</div>
add event parameter into the function:
$(".nav-mobile-toggle").click(function(event){
event.preventDefault();
});
Help me click a star
Load a page:
<div class="game-rating" data-ajax-url="/rate/image/403632/">
<span data-rating="2"></span>
<span data-rating="4"></span>
<span data-rating="6"></span>
<span data-rating="8"></span>
<span data-rating="10"></span>
</div>
When mouse a star 1 :
<div class="game-rating rate-1 " data-ajax-url="/rate/image/403632/">
<span data-rating="2"></span>
<span data-rating="4"></span>
<span data-rating="6"></span>
<span data-rating="8"></span>
<span data-rating="10"></span>
</div>
When mouse a star 2 :
<div class="game-rating rate-2 " data-ajax-url="/rate/image/403632/">
<span data-rating="2"></span>
<span data-rating="4"></span>
<span data-rating="6"></span>
<span data-rating="8"></span>
<span data-rating="10"></span>
</div>
star 1 ,2,3,4,5 I have click auto a star 1 can you help me create a
script to tampermonkey ? or javascript ?**
Sorry my bad english
I have following HTML:
<article>
<a href="#" title="Title">
<span class="row first">
<span class="col">
<span class="articleTitle">Article title</span>
<span class="row">
<span class="tel">12345</span>
<span class="mail">test#domain.com</span>
</span>
</span>
<span>
<span class="articleFlag flagNone"></span>
</span>
</span>
</a>
</article>
<article>
<a href="#" title="Title">
<span class="row first">
<span class="col">
<span class="articleTitle">Article title</span>
<span class="row">
<span class="tel">12345</span>
<span class="mail">test#domain.com</span>
</span>
</span>
<span>
<span class="articleFlag flagRed"></span>
</span>
</span>
</a>
</article>
And now I would like to change the background-color from the span with class 'articleTitle' to red, if the class 'flagNone' is set in this article. It should only change in this article not in the following one.
I tried this:
$(document).ready(function() {
if ($('.articleFlag.flagNone')) {
$('.articleFlag.flagNone').closest('.articleTitle').css("background", "red");
}
});
but it doesn't work. Any ideas?
Hello Please check this Demo
$(document).ready(function() {
if ($('.articleFlag.flagNone').length>0) {
$('.articleFlag.flagNone').closest('.row').find('.articleTitle').css("background-color", "red");
}
});
I think it will help you
Use jQuery's :has() selector (demo)
$(document).ready(function() {
if ($('.articleFlag.flagNone')) {
$('.row:has(.flagNone) .articleTitle').css("background", "red");
}
});
Closest traverse up the dom tree, that is the reason your selector doesn't work
try below js code
if ($('.articleFlag.flagNone')) {
$('.articleFlag.flagNone').parents('.row:eq(0)').find('.articleTitle').css("background", "red");
}
In a WordPress website, I want to configure a set of css buttons appear in a block. So that each post have a set of buttons. I was able to set them in inline-block. But the issue is that when I wrap them with a new class(via jquery) in order to center using display:block, the buttons belonging to other posts also appear in the recent posts.
Say, the recent post named - "mypost10" has the five buttons, other post buttons appear besides the five buttons if I wrap with main-class-wrap.
Here is the jquery to wrap and add classes:
jQuery(document).ready(function () {
jQuery(".sub").wrapAll("<span class='main-class-wrap' />");
jQuery(".sub-1").find('a').addClass('sub-sub-1 icon-magnifier');
jQuery(".sub-2").find('a').addClass('sub-sub-2 icon-tools');
jQuery(".sub-3").find('a').addClass('sub-sub-3 icon-shareable');
jQuery(".sub-4").find('a').addClass('sub-sub-4 icon-magnifier');
jQuery(".sub-5").find('a').addClass('sub-sub-5 icon-magnifier');
});
Here is the output code:
<span class="main-class-wrap">
<span class="sub sub-1">
<a href="http://link1.com" target="_blank" class="sub123 icon-one">
Link1
</a>
</span>
<span class="sub sub-2">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Link2
</a>
</span> <span class="sub sub-3">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Link3
</a>
</span>
<span class="sub sub-4">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Link4
</a>
</span>
<span class="sub sub-5">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Lin5
</a>
</span>
<span class="sub sub-1">
</span>
<span class="sub sub-2">
</span>
<span class="sub sub-3">
</span>
<span class="sub sub-4">
</span>
<span class="sub sub-5">
</span>
</span>
I put them all in a fiddle
Could any one tell me if I am doing anything wrong with the code?
Not sure why I'm getting this error and can't figure it out? The cycle works, I'm just getting this error in the console and would like to fix it. That's why I'm here now :)
I'm creating 3 different cycles on the same page with the same selector and using the pager for unique controls. This is what I have currently:
// Cycle Process individual samples - generate unique navs
$('.prospect-carousel').each(function(i) {
$(this).cycle({
fx: 'scrollHorz',
speed: 500,
pager: '.nav-pl' + i,
pagerAnchorBuilder: function(idx, slide) {
return '.nav-pl'+i+' li:eq(' + idx + ') a';
}
}).cycle('pause');
});
HTML:
<h6 class="carbon_heading">Top Prospects</h6>
<ul id="tab-nav" class="nav nav-tabs">
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
<div id="tab-wrap">
<div id="c2012" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl0">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2012 Player Rankings</p>
</div>
<div id="c2013" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl1">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2013 Player Rankings</p>
</div>
<div id="c2014" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl2">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2014 Player Rankings</p>
</div>
</div>
enter code here
I had Mike (developer of cycle) look at it and he said my third div was causing the issue b/c it was empty. He's going to fix this on the next release.