I have the following html code:
<div id="gridStage">
<div id="point1" class="point rounded-corners">
</div>
</div>
#gridStage is a larger div inside which a smaller div #point is contained.
I want to call a correct function if a user clicks on #point and another wrong function if the user clicks anywhere on #gridStage but not on #point.
The problem is that when the user clicks on #point, jQuery also detects click on #gridStage as a result of which both the functions are called, which is not required.
Currently I am able to do it with the following code:
var pointClick=0;
$(".point").click(function() {
var pointClick=1;
correct();
setTimeout(function() {
pointClick=0;
},1000);
});
$("#gridStage").click(function() {
setTimeout(function() {
if(pointClick===0) {
wrong();
}
}, 500);
});
But I know this is an inefficient way, so is there any other good solution possible??
Note: All I want to do is that I have a grid as an image, then I overlay a div over it & I want to detect if a user has clicked a correct point or not for which I place a div on the correct point on top of the overlay grid, now I have to detect whether his click is on correct point or noyt. So if you have a better layout for this except the above which I am using, you are free to suggest so.
You need to stop the propagation.
$(".point").click(function(e) {
correct();
e.stopPropagation();
});
$("#gridStage").click(function() {
wrong();
});
(note the e parameter on the line $(".point").click(function(e) { and the e.stopPropagation();)
Related
I'm essentially hiding a form until the user hovers over the call to action piece of the UI, and then sliding the form in while simultaneously sliding the CTA out. Then if the user clicks on the form it stays on the screen until focus is left. Otherwise the elements return to their original state on mouseleave. The animations are all handled with CSS transitions and transforms via adding classes with the js. I've got it working fine, but the js feels a little wet to me so I was curious if there might be a cleaner way to write this?
function fireNewsletter(){
$('.newsletter-container').bind("mouseenter focus", function() {
$(".newsletter-cta").addClass('hiding');
$(".newsletter-form").addClass('showing');
});
$(".newsletter-container").bind("mouseleave", function(){
if ( ! $(".newsletter-input").is(":focus")) {
$(".newsletter-cta").removeClass('hiding');
$(".newsletter-form").removeClass('showing');
}
});
$(".newsletter-input").focusout(function(){
$(".newsletter-cta").removeClass('hiding');
$(".newsletter-form").removeClass('showing');
});
}
I would probably just go with moving the show/hide logic into descriptively named functions and caching the references to the elements. It doesn't make it much shorter but it will perform better and it reads easier.
function fireNewsletter(){
var cta = $(".newsletter-cta"),
form = $(".newsletter-form"),
input = $(".newsletter-input"),
container = $(".newsletter-container");
function show () {
cta.addClass('hiding');
form.addClass('showing');
}
function hide () {
if (!input.is(":focus")) {
cta.removeClass('hiding');
form.removeClass('showing');
}
}
container.bind("mouseenter", show);
container.bind("focus", show);
container.bind("mouseleave", hide);
input.bind("focusout", hide)
}
So i'm wondering how you can make a div apear at a certain point of the page and stay in the exact same spot untill you reach a specific point of the page
kinda like they have on http://www.squarespace.com where you see a imac screen which stays on the screen until you reach a specific point
can this be done without using js
either way can someone let me know how?
I'm going to assume you mean making a div show up when the user has scrolled to a certain point in the page and then disappear when they scroll to another point.
This isn't technically possible with CSS. There might be a way to make it look like this with other elements covering it up, but I'll focus on doing it with JS for now.
Essentially, you want to
// set up limits for show/hide
var SHOW_Y = 100,
HIDE_Y = 800;
// function to be called every time
// the page is scrolled
function scrolled() {
if(window.scrollTop < SHOW_Y) {
hide(this);
} else if(window.scrollTop < HIDE_Y) {
show(this);
} else {
hide(this);
}
}
// helper function which hides an element
function hide(element) {
element.style.display = 'none';
}
// helper function which shows an element
function show(element) {
element.style.display = 'block';
}
window.addEventListener('load', function() {
var element = document.getElementById('your-element');
window.addEventListener('scroll', scrolled.bind(element));
});
I would probably do this using CSS classes rather than display properties, in order to control the way that the element disappears and reappears, but this should give you some idea.
You could also use a script like Skrollr or ScrollMagic.
I am trying to build my first website www.angelosmavraidis.com
I have inserted a javascript to show 8 divs of the same class when clicking on the "artwork" div.
The problem is that when the "artwork" is clicked and the rest of the divs show up the whole page moves a bit to the left.
Anyone know why this is happening?
Also can you recommend a better alternative to the following script to do the job?
$(document).ready(function(e) {
$('.mainmenu').each(function(index, element) {
$(this).click(function() {
$('.artwork').eq(index).show();
});
});
});
Thanks
Use preventDefault here like
$(document).ready(function(e) {
$('.mainmenu').each(function(index, element) {
$(this).click(function(ev) {
ev.preventDefault();
$('.artwork').eq(index).show();
});
});
});
As a way of learning CasperJS, I am trying to initiate a click event on a div on a remote page, and then change the class name of the div after I have clicked it. The idea is to find the first clickable div, click it, and then mark it as clicked so I can skip over it to other clickable divs. The markup for the div tag on the remote page looks like:
<div class='clickable_div'></div>
I have tried the following casperjs code:
...
casper.then(function() {
if( this.exists( 'div.clickable_div' ) ) {
this.evaluate(function() {
this.click(document.querySelector('div.clickable_div'));
return document.querySelector('div.clickable_div').setAttribute("className","clicked");
});
}
});
...
It doesn't seem to work. First, I don't think I am initiating the mouse click event on the div correctly. What am I missing? Second, when I fetch the updated html, I don't see any changes in the div's class name. Am I going about this step in the wrong way?
You're calling this.click within evaluate(), it just can't work as evaluate() executes code within the page DOM context where there's probably no window.click method.
Here's a possibly working script:
var linkSelector = 'div.clickable_div';
casper.then(function() {
if (!this.exists(linkSelector)) return;
this.click(linkSelector);
this.evaluate(function(linkSelector) {
__utils__.findOne(linkSelector).setAttribute("className", "clicked");
}, linkSelector);
});
You may want to have better handling of errors and edge cases, but you get the idea.
Here's what I have so far, which allows the user to click an image to open a new window and go to a location. When that click occurs, the image in the parent window is replaced with the next div.
Example: http://jsfiddle.net/rzTHw/
Here's the working code so far...
<div class = "box"><img src="http://placehold.it/300x150/cf5/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/f0f/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/fb1/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/444/&text=img+1"></div>
Jquery:
$('.box').not(':first').hide();
$('.box a').click(
function(e){
e.preventDefault();
var newWin = window.open(this.href,'newWindow'),
that = $(this).closest('.box'),
duration = 1200;
if (that.next('.box').length){
that.fadeOut(duration,
function(){
that.next('.box').fadeIn(duration);
});
}
});
What I am having trouble with is:
Creating a "next" button so the user can cycle through to the next div without having the click the image, thus avoiding having to open a new window to get to the next image.
Having a click on the last div redirect the window location to a URL, while still doing the normal function of opening a new window to the a href location if the image is clicked. Otherwise if clicking the "next" button when the last div is shown, simply redirect the user.
What's the best way to go about this? Thanks!
Here is my attempt at tweaking your code to allow for a next button, and my best guess at what you want to happen for the last image:
var redirectUrl = 'http://www.google.com'; // replace in your code
function next(event, duration) {
duration = duration || 1200; // default value
var that = $('.box:visible');
if (that.next('.box').length) {
that.fadeOut(duration, function() {
that.next('.box').fadeIn(duration);
});
} else {
window.location.href = redirectUrl;
// the above line doesn't work inside jsFiddle, but should on your page
}
return false;
}
$('.box').not(':first').hide();
$('.box a').click(
function(e) {
e.preventDefault();
var newWin = window.open(this.href, 'newWindow'),
duration = 1200;
next(e, duration);
});
$('.next').click(next);
jsFiddle example here. Note the redirect is prevented in some browsers since it is running inside an iframe. But it should work in a normal page.
Perhaps look at a slideshow jquery plugin. JQuery Cycle being just one example. There are plenty. Just google jquery Slideshow or jquery cycle and pick the one that suites you best. The cycle plugin itself has a number of "pager" examples that let you change the contents of the displayed picture without leaving the page.
Most of them offer having the contents be html and not just a simple picture so you can play around with what exactly you want.
There's also Fancybox, lightbox, colorbox, etc. if that's what you're trying to accomplish.