Trying to get one image to load on page load and then hide the other three images. Then on mouseover hide the other three and show the appropriate image on hover. On load it works perfectly, but on hover all of the images disappear. Below is the code.
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-one">
<div id="blocrst-1" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-two">
<div id="blocrst-2" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-three">
<div id="blocrst-3" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-four">
<div id="blocrst-4" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/venue-info.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
jQuery:
<script>
jQuery().ready(function(){
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
$(function() {
$("#btnBrowseEvents").mouseover(function() {
$("#blocrst-1").removeClass().addClass("phone-image wow fadeInRight");
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnBottleService").mouseover(function() {
$("#blocrst-2").removeClass().addClass("phone-image wow fadeInRightBig");
$('.phone-one').hide();
$('.phone-three').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnConnect").mouseover(function() {
$("#blocrst-3").removeClass().addClass("phone-image wow fadeInLeft");
$('.phone-one').hide();
$('.phone-two').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnYourDigitalHost").mouseover(function() {
$("#blocrst-4").removeClass().addClass("phone-image wow fadeInLeft");
$('.phone-one').hide();
$('.phone-two').hide();
$('.phone-three').hide();
});
});
});//end ready
</script>
You first do
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
but subsequently never call show on any of these elements. The
$("#blocrst-2").removeClass().addClass("phone-image wow fadeInRightBig");
affects the img elements, but the parents are still hidden. Adding a
$('.phone-one').show(); in your mouseover functions will fix your problem. Remember to change the phone-one to match the class of the div you're trying to show (you should really be using an id for these divs).
As an aside, take a look at the developer tools in chrome or firefox. It'll help you see how your javascript affects your DOM so you can track down issues more easily in the future.
Related
This my slide HTML :
<div class="slide_container">
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide2.jpg">
</div>
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide3.jpg">
</div>
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide4.jpg">
</div>
</div>
And the JQuery :
setInterval(function(){
$('.active').removeClass('active').addClass('old_active');
if($('.old_active').is(':last-child')){
$('.one_slide').first().addClass('active');
}
else{
$('.old_active').next().addClass('active');
}
$('.old_active').removeClass('old_active');
$('.one_slide').fadeOut(500);
$('.active').fadeIn(500);
},5000);
This is my JQuery slide, the problem with it is when the image change it's forcing my page to scroll to the top and i don't like this, i searched for the same issue but no result .
Try removing the 'href="#"', this is responsible for the upscrolling!
I'm using jQuery to create a simple addClass on hover. Hovering over a #science-panel-number div triggers a class of .active to be added to an #iphone-screen-number div.
Here is my jQuery:
$('#science-panel-1').hover(function(){
$('#iphone-screen-1').addClass('active');
},function(){
$('#iphone-screen-1').removeClass('active');
});
$('#science-panel-2').hover(function(){
$('#iphone-screen-2').addClass('active');
},function(){
$('#iphone-screen-2').removeClass('active');
});
$('#science-panel-3').hover(function(){
$('#iphone-screen-3').addClass('active');
},function(){
$('#iphone-screen-3').removeClass('active');
});
My HTML:
<div class="col-md-4">
<div id="science-panel-1" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-2" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-3" class="science-panel__item">
Content goes in here!
</div>
</div>
<div class="col-md-4">
div id="iphone-screen-1" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
div id="iphone-screen-2" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-3" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-4" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-5" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-6" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
</div>
<div class="col-md-4">
<div id="science-panel-4" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-5" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-6" class="science-panel__item">
Content goes in here!
</div>
</div>
This feels like a lot of code to do the same script. Is there a way to have one piece of script that can add the numbers it self? As #science-panel-1 will always link to to #iphone-screen-1 and so on.
This will do what you need. Just apply the handlers to elements whose ID begins with science-panel-, which should cover all of them...
$("[id^=science-panel-]").hover(function() {
// get the corresponding iphone-screen element id
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).addClass("active");
},function() {
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).removeClass("active");
});
I recommend changing the markup to include the data you need to drive the script:
<div data-target="#iphone-screen-1" id="science-panel-1" class="science-panel__item">...</div>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
This allows you to select all the science panel items at once:
$('.science-panel__item')
and perform the exact same script on each of them:
$('.science-panel__item').hover(function () {
$($(this).data('target')).addClass('active');
// ^^^^^^^^^^^^^^^^^^^^^^
// use the data-target attribute as a selector
}, function () {
$($(this).data('target')).removeClass('active');
});
If you change the attribute and the selector, you'll have a reusable feature you can apply to any element:
$('[data-hover-target]').hover(function () {
$($(this).data('hoverTarget')).addClass('active');
}, function () {
$($(this).data('hoverTarget')).removeClass('active');
});
I'd firstly ask if the active class is strictly necessary? Can what you want be achieved with CSS if it is for styling only by using the :hover pseudoclass?
If you do need the .active class for some reason, I would change the markup to be a little more generic so that all the science panels had a CSS class of .science-panel and all the iphone screens had a class of .iphone-screen. Then you could simplify the JS to look like
$('.science-panel').on('mouseenter mouseleave', function(e) {
$(this).find('.iphone-screen').toggleClass('active', e.type === 'mouseenter');
});
This will find the .iphone-screen inside of the .science-panel that you hover over and toggle the class to on if the mouse enters and off when the mouse leaves it.
edit: I see you've updated your answer to include your markup, this answer was assuming that your iphone-screens were nested in the science-panels so this won't necessarily work for you if you don't/can't nest your markup
i am trying to dynamically add images in the slider called owl slider.
The problem is that i want to clear the divs inside the
.owl-wrapper
div and then add new items on a click.
The original code is
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<img src="../img/car1.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car2.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car3.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car4.jpg" alt="The Last of us">
</div>
</div>
Now i did this
$('.singleNewsItem').click(function () {
$('#owl-demo').append('<div class="item"><img src="../img/trac1.jpg"></div>');
});
});
Somehow its adding the image outside the main slider.
Please help .
thanks.
Try this:
// make sure it's initialized:
// $("#owl-demo").owlCarousel();
$('.singleNewsItem').click(function () {
// clean the container:
$('#owl-demo').text('');
var img = '<div class="item"><img src="../img/trac1.jpg"></div>';
$("#owl-demo").data('owlCarousel').addItem(img);
});
There is a demo with owl manipulation examples.
Demo with transistions.
I am trying to toggle visibility on a div by clicking a button in a neighboring div. I'm using a class .expand to fire the onClick and another class .target as the target, but the problem is that every div with the .target class fires onClick, instead of just the one I want. Logically, I understand why that's happening, but I don't know how to get around it... Here is a bootply: http://www.bootply.com/oSGM0jOG6q#.
$('.expand').on('click', function(e){
$(".target").toggleClass("hidden");
$(".target").toggleClass("visible");
});
HTML
<!-- Thumbnail -->
<div class="col-sm-4">
<div class="thumbnail">
<img src="//placehold.it/400x300&text=Photo1">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Expand</p>
</div>
</div>
</div>
<!-- Big-Image -->
<div class="col-xs-12 target hidden">
<div class="thumbnail">
<img src="//placehold.it/1200x900&text=Photo1">
<div class="caption">
<h3>HighRes</h3>
<p>Close</p>
</div>
</div>
</div>
PS - I prefer to use bootstrap's hidden/visible classes for clean markup, but am not totally stuck on it.
You can use .closest() to find parent div with class col-sm-4 then use .next() to find target
$('.expand').on('click', function(e){
$(this).closest('.col-sm-4').next(".target").toggleClass("hidden visible");
});
Try to use .closest() to get the static parent, i just meant static parent as .thumbnail, since col-sm-4 this class would get change depends upon the layout, i assume. So grab the closest .thumbnail and get its parent then target the next sibling to it.
$('.expand').on('click', function(e){
$(this).closest('.thumbnail').parent().next('.target').toggleClass("hidden visible");
});
DEMO
Here is your bootply http://www.bootply.com/gk8gtlaH1L
Add a div with a new Expand wrapping both the divs. It would be easy for you :)
JS CODE
$('.newExpand').on('click', function(e){
$(this).find(".target").toggleClass("hidden");
$(this).find(".target").toggleClass("visible");
});
HTML CODE
<div class="newExpand">
<!-- Thumbnail -->
<div class="col-sm-4">
<div class="thumbnail">
<img src="//placehold.it/400x300&text=Photo1">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Expand</p>
</div>
</div>
</div>
<!-- Big-Image -->
<div class="col-xs-12 target hidden"><!-- use js to add/remove class"hidden" on button click -->
<div class="thumbnail">
<img src="//placehold.it/1200x900&text=Photo1">
<div class="caption">
<h3>HighRes</h3>
<p>Close</p>
</div>
</div>
</div>
</div>
To use a declarative approach that doesn't tie the JavaScript too heavily to the DOM structure, you could set data-target on each button element to specify the target element to be toggled when the button is clicked, and update the click handler to find the element(s) identified.
For example:
$('.expand').on('click', function(e){
var sel = $(e.target).data("target");
if (sel) {
$(sel).toggleClass("hidden");
$(sel).toggleClass("visible");
}
});
And in the HTML:
<!-- Thumbnail -->
<div class="col-sm-4">
Expand
</div>
<!-- Big-Image -->
<div id="bigImage" class="hidden">
This div will be hidden/shown when the button is clicked
</div>
Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.
This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/