JQuery page jumping to the top of the page - javascript

I am using this Jquery and it works great
The problem is when i click on the button the page jumps all the way to the top. I am using Miva if that makes a difference
$(document).ready(function(){
$('.drop').click(function(){
var $next = $(this).parent().next('li.drop_down');
if($next.is(':visible')) {
$next.slideUp();
} else {
$next.slideDown();
}
});
});

Try adding "return false" to the end of your click() function.
Edit: (adding code example)
$(document).ready(function(){
$('.drop').click(function(){
var $next = $(this).parent().next('li.drop_down');
if($next.is(':visible')) {
$next.slideUp();
} else {
$next.slideDown();
}
return false;
});
});

Related

part of jquery code that is not working in wordpress

I have developed a jquery code that should let the menu hide a bit when I scroll down, and reappear as soon as I start scrolling up.
I had this perfectly working on my static html website, but I soon as I migrated it to wordpress, it stopped working. All my other js code works perfectly.. here is the part of code:
$(document).ready(function(){
$(window).scroll(function () {
var prevScroll;
var hidden = false;
var currentScroll = $(this).scrollTop();
if($("body").scrollTop() > 492){
if (prevScroll) {
console.log(currentScroll + " " + prevScroll);
console.log(hidden);
if (currentScroll < prevScroll && hidden) {
console.log('show');
$("#header-wrap").animate({marginTop: '0px'}, 200);
$("#menu").fadeIn("fast");
hidden=false;
} else if (currentScroll > prevScroll && !hidden) {
console.log(hidden);
console.log('hiding');
$("#header-wrap").animate({marginTop: '-60px'}, 200);
$("#menu").fadeOut("fast");
hidden=true;
}
} else if(!hidden){
console.log('first time');
$("#header-wrap").animate({marginTop: '-60px'}, 200);
$("#menu").fadeOut("fast");
hidden= true;
}
prevScroll = currentScroll;
}
else{
if(hidden){
console.log('show');
$("#header-wrap").animate({marginTop: '0px'}, 200);
$("#menu").fadeIn("fast");
hidden=false;
}
}
});
});
What is the problem with my code? I have it alongside all my js code in a script.js page.
Thanks
EDIT: I forgot to say that the menu is hiding , which is good, but it is not reappearing as soon as I scroll up. So part of the code is working, the other is not!
There's probably happen a conflict here between jQuery and Wordpress since both of them are using $ sign, try to use jQuery instead of $ or wrap your jQuery code inside:
jQuery(document).ready(function($){
$(window).scroll(function () {
// Your code here
});
});
I did it, the problem was that I was declaring var prevScroll;and var hidden = false; after the beginning of the function$(window).scroll(function () {, and not before it. Thanks for the help anyway..

toggle() not working for content loaded with ajax?

$('.slideArrow').toggle(function (event) {
//some code
}, function (event) {
//some code
});
This works fine for content which are loaded on page-load.But the same function does not work for content loaded with ajax.It just does not intercept the click.
What should I do?
In an other scenario,i faced a same problem(not for toggle,for click) and sorted it this way.I dont know what to do for toggle?
$('.common-parent').on('click','.target-of-click',function(){
//some code
})
The flag method :
var flag = false;
$(document).on('click', '.slideArrow', function(event) {
if (flag) {
// do one thing
}else{
// do another thing
}
flag = !flag;
});
the data method
$(document).on('click', '.slideArrow', function(event) {
if ( $(this).data('flag') ) {
// do one thing
}else{
// do another thing
}
$(this).data('flag', !$(this).data('flag'));
});

How to toggle an animation upon clicking a button

I have the following j-query code (using the jquery plugin ajax/libs/jquery/1.10.1) to move a div element to the left upon clicking on a separate div element:
<script>
$(document).ready(function(){
$("#tab_box3").click(function(){
$.fx.speeds._default = 800;
$("#tab3").animate({left:"+=97%"});
});
});
</script>
What I want to happen is when the #tab_box3 div is clicked on a second time, the #tab3 div moves back to where it originally started.
I tried the following, using Toggle, but it does not seem to have worked:
<script>
$(document).ready(function(){
$("#tab_box3").click(function(){
$.fx.speeds._default = 800;
$("#tab3").animateToggle({left:"+=97%"});
});
});
</script>
Can anyone offer advice please?
You must doing something like this :
$(document).ready(function(){
$("#tab_box3").click(function(e){
var element = $(this),
clicked = parseInt(element.data('clicked')) || 0;
element.data('clicked', clicked + 1);
$("#tab3").stop();
if (clicked % 2 == 0)
{
$("#tab3").animate({left:"+=97%"}, 800);
}
else
{
$("#tab3").animate({left:"-=97%"}, 800);
}
e.preventDefault();
});
});
An example here :
http://jsfiddle.net/Q5HDu/
You will have to use -=97% to offset the previous animation change.
var $tab3 = $("#tab3");
if ($tab3.data("animated")) {
$tab3.animate({left: "-=97%").data("animated", false);
}
else {
$tab3.animate({left: "+=97%").data("animated", true);
}

Two divs click event works only on one div

I'm using jquery and ajax to create a drawer (#DrawerContainer) and load content into it if I click a thumbnail in a gallery. My function is almost finished but I want to be able to close that drawer if I click again the opening button (now #current).
Here is a jsfiddle of my code: http://jsfiddle.net/RF6df/54/
The drawer element appears if you click a square/thumbnail, it's the blueish rectangle.
The current thumbnail is turned green.
I added a button in my drawer (not visible in the jsfiddle) to close it. I use this part of code for this purpose and it's working like a charm.
// Close the drawer
$(".CloseDrawer").click(function() {
$('#DrawerContainer').slideUp()
setTimeout(function(){ // then remove it...
$('#DrawerContainer').remove();
}, 300); // after 500ms.
return false;
});
Now I need my #current div to be able to close #DrawerContainer the same way .CloseDrawer does in the code above. Unfortunately adding a second trigger like this $("#current,.CloseDrawer").click(function() to my function isn't working... When clicking my "current" thumbnail, it just reopen the drawer instead of closing it...
How can I modify my code to close my #DrawerContainer with the "current" thumbnail?
Please keep in mind that I'm learning jquery, so if you can comment it could be of a great help. And please do not modify my markup or css, since everything works beside the closing part.
As per my understanding, you can use "toggle()" function which does exactly the same (i.e, toggle visiblity).
$('#DrawerContainer').toggle();
EDIT:
Updated the script to work.
$(document).ready(function() {
$.ajaxSetup({cache: false});
$('#portfolio-list>div:not(#DrawerContainer)').click(function() {
if ($(this).attr("id") != "current")
{
// modify hash for sharing purpose (remove the first part of the href)
var pathname = $(this).find('a')[0].href.split('/'),
l = pathname.length;
pathname = pathname[l-1] || pathname[l-2];
window.location.hash = "#!" + pathname;
$('#current').removeAttr('id');
$(this).attr('id', 'current');
// find first item in next row
var LastInRow = -1;
var top = $(this).offset().top;
if ($(this).next().length == 0 || $(this).next().offset().top != top) {
LastInRow = $(this);
}
else {
$(this).nextAll().each(function() {
if ($(this).offset().top != top) {
return false; // == break from .each()
}
LastInRow = $(this);
});
}
if (LastInRow === -1) {
LastInRow = $(this).parent().children().last();
}
// Ajout du drawer
var post_link = $(this).find('.mosaic-backdrop').attr("href");
$('#DrawerContainer').remove(); // remove existing, if any
$('<div/>').attr('id', 'DrawerContainer').css({display: 'none'}).data('citem', this).html("loading...").load(post_link + " #container > * ").insertAfter(LastInRow).slideDown(300);
return false; // stops the browser when content is loaded
}
else {
$('#DrawerContainer').slideUp(300);
$(this).removeAttr("id");
}
});
$(document).ajaxSuccess(function() {
Cufon('h1'); //refresh cufon
// Toggle/close the drawer
$("#current,.CloseDrawer").click(function() {
$('#DrawerContainer').slideToggle()
setTimeout(function(){ // then remove it...
$('#DrawerContainer').remove();
}, 300); // after 500ms.
return false;
});
});
//updated Ene's version
var hash = window.location.hash;
if ( hash.length > 0 ) {
hash = hash.replace('#!' , '' , hash );
$('a[href$="'+hash+'/"]').trigger('click');
}
});
Also, updated it here: Updated JS Fiddle
EDIT -2: Updated Link
Hope this Helps!!

How to switch a div display on first click?

html head:
<script type="text/javascript" language="JavaScript">
function getStyle() {
var temp = document.getElementById("cont").style.display;
return temp;
}
function switch01() {
var current = getStyle();
if (current == "none") {
document.getElementById("cont").style.display = "block";
}
else {
document.getElementById("cont").style.display = "none";
}
}​
</script>
body:
CONTENT
CSS:
#cont{
display: none;
}
After loading the page - first click doesn't work. After the first click - everything works.
Also, How could I show/hide the div slowly (with sliding effect, not momentally) ?
The value you get for the first time is "undefined".
You can:
1) Set the value via javascript when page loads;
document.getElementById("cont").style.display = "none";
or
2) decode "undefined" value to none, because you know that at first the value will be none;
var temp = document.getElementById("cont").style.display;
if (temp == "undefined")
temp = "none";
return temp;
both pretty ugly solutions, but they work.
If it must be inline you need to do this DEMO
CONTENT
and this (reversing the test for none to be a test for not block)
<script type="text/javascript" language="JavaScript">
function switch01(objId) {
var current = document.getElementById(objId).style.display;
document.getElementById(objId).style.display=(current!="block")?"block":"none";
return false
}
</script>
The above ANSWERS your question
UPDATE: Since it seems you would like jQuery instead, here is how you need to code that - notice the return false which Michal missed.
CONTENT
$(function() { // wait for the page to load
$('#toggle').on("click",function(e) { // when link clicked
$('#cont').slideToggle(); // slide open or closed
return false; // or e.preventDefault(); // stop the click executing the href
});​
});​
If you want the slide effect, my recommendation is using jQuery:
$('#toggle').click(function() {
$('#cont').slideToggle();
});​
See this DEMO.
For changing the sliding speed and more information see documentation.
For hiding the div.. you can take a look at
$('cont').hide(); function.
More relevant Information is available here :
http://api.jquery.com/hide/
http://api.jquery.com/show/
And for sliding effect Jquery is top notch in this department. You just have to pass the argument as given below.. and it does the work.
$("cont").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
FYI : http://docs.jquery.com/UI/Effects/Slide

Categories

Resources