I have a web page that uses jQuery. My page looks something like this:
<div id="page">
<!-- Stuff here -->
<div id="content">
<div class="row">
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
</div>
<div class="row">
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
</div>
</div>
<!-- Stuff here -->
</div>
<div id="note" style="display:none;">
<!-- stuff here -->
</div>
var noteTimeout = null;
var note = $('#note');
$(".row")
.mouseover(function () {
var col = $(this).find('.col:last');
var p = col.position();
note.css({zIndex:1000, top: p.top, left: (p.left + col.width() - note.width()/2) });
note.show();
})
.mouseout(function (e) {
if (noteTimeout != null) {
clearTimeout(noteTimeout);
}
noteTimeout = setTimeout(function () {
note.fadeOut(150);
}, 250);
})
;
Basically, when a user hovers over a row, I'm trying to show a note in the last column of the row. If a user moves to another row, the note moves to that row. However, if the user's mouse is outside of the "content" area, I want to hide the note after 250 milliseconds. The last requirement is causing me problems.
As it is, the note disappears after 250 milliseconds if I change rows. However, if I remove the timeout, the note flickers if a user moves their mouse over it.
You want to use .hover for the element (in this case an array of elements) which detects as the mouse enters and leaves. It's an expansion of the functionality of .mouseenter() & .mouseleave().
This is will make it so that whilst the mouse is over the element it will do something rather than .mouseover which simply triggers an event.
This is explained further by Navin Rauniyar here
Related
I am creating a website using WordPress, so the content is created dynamically.
The elements ID is also dynamically generated
Each container can have these elements (a container can have multiple - but not the same):
t_1
f_1
f_2
f_3
I also add the container count at the end of the elements ID, so each element will have a unique ID
Let's say the PHP will generate a HTML like this:
<div id="container_1">
<div id=f_1_1>
//content
</div>
<div id=f_2_1>
//content
</div>
</div>
<div id="container_2">
<div id=t_1_2>
//content
</div>
</div>
<div id="container_3">
<div id=f_1_3>
//content
</div>
</div>
I would like to animate the position of these elements as the user scrolls, I added javascript to do it:
var scroll = window.pageYOffset;
window.addEventListener('scroll', function() {
scroll = window.pageYOffset;
requestAnimationFrame(scroll)
}, false)
function scroll() {
document.getElementById("f_1_1").style.top = scroll * 10 + 'px';
}
So here is the problem, I don't know which elements should I get by ID.
I thought about making a loop where I check each container for the elements inside, however I think it would use too much resources and would be laggy as the function runs each time the user scrolls.
An other solution I tried is to add the javascript dynamically to each container so I know exactly which elements I need to animate. It worked only for the first container as when I added the next container there were multiple function using the same name and only the last function has been executed
<div id="container_1">
<div id=f_1_1>
//content
</div>
<script type="text/javascript">
function scroll() {
document.getElementById("f_1_"+<?php echo $pagecounter?>).style.top = scroll * 10 + 'px';
}
</script>
</div>
You can use - WOW.js for animation when element is comes inside viewport.
<div id="container_1">
<div id=f_1_1 class="wow myCustomAnimation">
//content
</div>
<div id=f_2_1 class="wow myCustomAnimation">
//content
</div>
</div>
<div id="container_2">
<div id=t_1_2 class="wow myCustomAnimation">
//content
</div>
</div>
<div id="container_3">
<div id=f_1_3 class="wow myCustomAnimation">
//content
</div>
</div>
Where you have to write myCustomAnimation as per your requirment.
As title states, the website I have currently has a "click to go to next image" slide show as the banner image. I'm looking to turn it into a slideshow that automatically transitions from image to image but I'm not sure exactly how to do it.
The site can be found # rdesignmedia.com/testing/logo_you
The code is as follows:
<div class="camera_container">
<div class="camera_wrap" id="camera">
<div data-src="images/page-1_slide1.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron jumbotron1">
<em>On Tour</em>
<div class="wrap">
<p>Engineered Elegance</p>
</div>
</div>
</div>
</div>
<div data-src="images/page-1_slide2.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron jumbotron2">
<em>ELEVATE</em>
<div class="wrap">
<p>Your Brand Lives Here.</p>
</div>
</div>
</div>
</div>
<div data-src="images/page-1_slide3.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron">
<em>Tech Branding</em>
<div class="wrap">
<p>Stand out from the crowd with technological branding</p>
</div>
</div>
</div>
</div>
</div>
</div>
Looking at the site you can do this after the page loads:
// Creates an interval that runs the function every 2 seconds
setInterval(
function () {
// Finds the ul holding the little dots
var ul = $(".camera_pag_ul");
// Finds the currently selected dot
var selected = ul.find('.cameracurrent');
// Finds the next dot to click
var next = selected.next('li');
// If the next dot exists click it, else start over with first one
if (next.length != 0) {
next.click();
}
else {
ul.find('li:first').click();
}
}, 2000
);
This works if I run it in the console on the site. This switches the image every 2 seconds. You can obviously change the 2000 to something else to increase the time the images is displayed before the next one shows.
I'm working on a slideToggle function on click, I want to hide the previous element that was clicked when a new one is clicked, I've used this same set of code previously and its worked however it's no longer working now and I'm stumped at why its no longer works:
My code is as below or view a jsfiddle
js/js.js
$('.togglesources').hide();
$('.captionsource').on('click', function () {
$(this).next('.togglesources').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
index.html
<div class="mostpopular">
<h4>Nokia:</h4>
<h5>3100</h5>
<p>Most popular mobile phone of the year</p>
<div class="sources">
<p class="captionsource">Click to toggle source</p>
<div class="togglesources">
<p class="source">Wikipedia (Data Source)</p>
<p class="source">GSM Solution (Image Source)</p>
</div><!-- End Toggle Sources -->
</div><!-- End Sources -->
</div>
<!-- END MOST POP -->
<div class="mostpopular">
<h4>Lord of the Rings:</h4>
<h5>Return of the King</h5>
<p>Highest Grossing Film</p>
<div class="sources">
<p class="captionsource">Click to toggle source</p>
<div class="togglesources">
<p class="source">Wikipedia</p>
<p class="source">IMDB (Image Source)</p>
</div> <!-- End Toggle Sources -->
</div> <!-- End Sources -->
</div>
would appreciate some help in regards to this.
Why aren't the other '.togglesources' divs closing when I open a new one?
Try this:
$('.togglesources').hide();
$('.captionsource').on('click', function () {
$(this).closest('.mostpopular').siblings().find('.togglesources').slideUp();
$(this).next('.togglesources').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
Working Fiddle
I have an alternating two-column layout made with Twitter Bootstrap 3.
First row has an image on the left and text on the right. Second row has text on the left and an image on the right. And so on.
What I would like to do is on smaller screens (less than 768px) where it turns into a single-column layout have the rows where the image is on the right swap the content of the two columns so the image is displayed on top.
The rows with the image on the right have the class of even.
Here is the html of an even row:
<div class="row">
<div class="col-sm-6 left evenleft">
text
</div> <!-- end col-sm-6 -->
<div class="col-sm-6 right evenright">
image
</div> <!-- end col-sm-6 -->
</div> <!-- end row -->
Here is the jQuery I am trying to use:
function swap() {
$('.even').each(function () {
var left, right;
left = $(this).find('.evenleft').html();
right = $(this).find('.evenright').html();
if ($(window).width() < 768) {
$(this).find('.evenleft').html(right);
$(this).find('.evenright').html(left);
} else {
$(this).find('.evenleft').html(left);
$(this).find('.evenright').html(right);
}
});
}
$(function () {
swap();
});
$(window).resize(function () {
swap();
});
It works perfectly when you start the page already re-sized. But when re-size the browser it doesn't work.
I am kind of lost here.
You could use .col-sm-pull-6 and .col-sm-push-6:
<div class="row">
<div class="col-sm-6 col-sm-push-6">
image
</div> <!-- end col-sm-6 -->
<div class="col-sm-6 col-sm-pull-6">
text
</div> <!-- end col-sm-6 -->
</div> <!-- end row -->
http://plnkr.co/edit/0f1Id9VYZlRel66OeKni?p=preview
You could place the image first and float it right. I'd imagine you wouldn't need JS at all fot this.
I have a jQuery function where certain divs fade in and out, I cant paste my entire file into a jsFiddle as its too large and all image links are relative, I have the following however...
// On click hide default, Country specific
$('.default .asia').click(function(){
$('.default').fadeOut("fast");
$(".default").queue(function () {
$('.viewport-asia').fadeIn("fast");
$('.viewport-asia').dequeue();
});
});
$('.default .north-america').click(function(){
$('.default').fadeOut("fast");
$(".default").queue(function () {
$('.viewport-america').fadeIn("fast");
$('.viewport-america').dequeue();
});
});
$('.default .europe').click(function(){
$('.default').fadeOut("fast");
$(".default").queue(function () {
$('.viewport-europe').fadeIn("fast");
$('.viewport-europe').dequeue();
});
});
// Drag event
$(".america-big").draggable();
$(".europe-big").draggable();
$(".asia-big").draggable();
// Reset map
$('a.zoom-out').click(function(){
$('.hidden').fadeOut("fast");
$(".hidden").queue(function () {
$('.default').fadeIn("fast");
$('.hidden').dequeue();
});
})
});
The last function // Reset Map "a.zoom-out" should fade out the current div and fade in the .default div, its currently fading out the current div but the default div isn't fading back in?
Can anybody see where im going wrong?
HTML
<div class="map">
<!-- // Default Map -->
<div class="default">
<div class="asia"><img src="map/asia.png" alt="Asia"></div>
<div class="north-america"><img src="map/north-america.jpg" alt="America"></div>
<div class="europe"><img src="map/europe.jpg" alt="Europe"></div>
</div>
<!-- // Animated Map // North America -->
<div class="viewport-america hidden">
<div class="compass">
Top
Right
Bottom
Left
</div>
Zoom Out
<div class="instructions"><img src="map/instructions.png" alt="Instructions"></div>
<div class="america-big"><img src="http://placekitten.com/1989/996" alt="America" /></div>
</div>
<!-- // Animated Map // Europe -->
<div class="viewport-europe hidden">
<div class="compass">
Top
Right
Bottom
Left
</div>
Zoom Out
<div class="instructions"><img src="map/instructions.png" alt="Instructions"></div>
<div class="europe-big"><img src="http://placekitten.com/2000/1000" alt="Europe" /></div>
</div>
<!-- // Animated Map // Asia -->
<div class="viewport-asia hidden">
<div class="compass">
Top
Right
Bottom
Left
</div>
Zoom Out
<div class="instructions"><img src="map/instructions.png" alt="Instructions"></div>
<div class="asia-big"><img src="http://placekitten.com/1999/999" alt="Asia" /></div>
</div>
</div>
You do not need the queue function.
If you want the fadeIn and fadeOut at the same time:
$('.default .asia').click(function(){
$('.default').fadeOut("fast");
$('.viewport-asia').fadeIn("fast");
});
If you want the fadeOut first and after it finishes the fadeIn:
$('.default .asia').click(function(){
$('.default').fadeOut("fast", function(){
$('.viewport-asia').fadeIn("fast");
});
});