could you help me to figure this out?
I'm trying to use this page slide method from this
http://jsfiddle.net/XNnHC/942/
$(document).ready(function()
{
var slider_width = $('.pollSlider').width();//get width automaticly
$('#pollSlider-button').click(function() {
if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated'))
{
$('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width});
}
else
{
if(!$(this).is(':animated'))//perevent double click to double margin
{
$('.pollSlider,#pollSlider-button').animate({"margin-right": '+='+slider_width});
}
}
});
});
and this is what I've been trying
http://jsfiddle.net/ejkim2000/f7DVK/
but I'm having some problems.
First problem I have is trigger button place gets margin so the sentence after place is being pushed. I deleted #pollSlider-button in this code
$('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width}); }
to disable the margin from button but ended up having the slide page keep sliding to the right. Is there any way that I can make the slide page work without having margin on a button?
Another problem is I input another button in slide page for closing action but It simply doesn't work and I can't even understand why. Hope somebody can help to make this closing button work.
Just your information, I'd like to use width and height with css because it'll be easier for me to make slide page responsive and I also would like to apply this method for other directions too.
Thanks a million!
Try this
Working DEMO1
This is with same button to close and open the slider
$(document).ready(function () {
var slider_width = $('.pollSlider').width(); //get width automaticly
$('#pollSlider-button').click(function () {
if ($('.pollSlider').css("margin-right") == 0 + "px") {
$('.pollSlider').animate({
"margin-right": '-=' + slider_width
});
} else {
$('.pollSlider').animate({
"margin-right": '+=' + slider_width
});
}
});
});
Try this
Working DEMO2
This is with separate button for open and close
$(document).ready(function () {
var slider_width = $('.pollSlider').width();
$('#pollSlider-button').click(function () { //open button
if ($('.pollSlider').css("margin-right") == "-" + slider_width + "px") {
$('.pollSlider').animate({
"margin-right": '+=' + slider_width
});
}
});
$('#pollSlider-button2').click(function () { //close button with different id
if ($('.pollSlider').css("margin-right") == 0 + "px") {
$('.pollSlider').animate({
"margin-right": '-=' + slider_width
});
}
});
});
Hope this helps,Thank you
Related
I made a website in two column. On the left side there are alls link, on the other side there is the content. When you click on a link the content goes up, and the link also align itself.You can test it here I'm searching for a way to implement a button on the bottom of the left side, that allow to scroll to the top of the document in a special way : il will to activate the first link on top (and scroll to it) and in the same time align the correspondent article of the right side. So far the alignment system is working, except for this link, see the code i'm trying to add bellow.
$('.cd-top').bind('click', function(e) {
e.preventDefault();
var $container = $('.menu-content:first'),
$desc = $('.menu-content:first');
$desc.slideDown('100', function() {
$("#scrollingaside").scrollTo( $container, 500, {offset: { top:-1 } } );// la hauteur d'alignement c'est ici !
$("#scrollingontheright").scrollTo( $("#" + $container.attr('data-id')), 1500);
});
}
});
$('.article').bind('click', function() {
var idproj = $(this).find('span:first').attr('id');
$('.menu-content[data-id="' + idproj + '"]').find('.cd-top').trigger('click');
});
// use on() instead of bind
$('.expander').on('click', function(e) {
e.preventDefault();
var $container = $(this).parents('.menu-content:first'),
$desc = $(this).parents('.menu-content');
// newly added
$('.expander').parents(".current").removeClass('current');
if($container.hasClass('current') == false) {
var others = $('.current');
$container.addClass('current');
$desc.slideDown('100', function() {
$("#scrollingaside").scrollTo( $container, 500, {offset: { top:-1 } } );// la hauteur d'alignement c'est ici !
$("#scrollingontheright").scrollTo( $("#" + $container.attr('data-id')), 1500);
});
}
});
$('.article').bind('click', function() {
var idproj = $(this).find('span:first').attr('id');
$('.menu-content[data-id="' + idproj + '"]').find('.expander').trigger('click');
});
**// new code**
$(".cd-top").on("click",function(){
$('.expander:first').trigger("click");
});
You can just attach a click handler to that button and trigger ("forward") a click event on the top most link from the menu:
$('#top').click(function() {
$('.menu a')[0].click()
})
The selector '.menu a' must be modified to target the correct link.
This question is based on my last question.
show or make visible active tab
there were some issues that I have to fix so I have fixed. but still I can't make it work properly.
Like I want to scroll left and right active/clicked tabs to show. please have look to jsfiddle example. such as: when I click on overflowed tab 5 and it should show visible. then from 1 till 4 will be overflowed (hidden) so now If I click on 2 (2 click) then it should scroll to right and show it visible. In reality, there will be N number of list(li) elements.
I just found don't know why but jsfiddle example doesn't work on IE.
Thank you...
Jsfiddle
$(document).on('click', '.liClicked', function () {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
$('.element').animate({
"left": "-=50px",
}, "slow")
});
$("#right").click(function () {
var calcs = ($('ul li#tab1').width());
$(".element").animate({
"left": "+=" + calcs,
}, "slow");
});
$("#left").click(function () {
$(".element").animate({
"left": "-=50px"
}, "slow");
});
Try this:
$(document).on('click', '.liClicked', function() {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
var me = $(this);
$('.element').animate({
"left": $('li#' + me.prop('id')).position().left * -1 ,
}, "slow")
});
Also, it isn't recommended to have two elements with the same ID
I have a back to top button that appears when you scroll a little bit .It's working fine but when scrolling if I get to the footer i want the button to go above the footer.
I used the jquery animate method to change the bottom css rule of the button when I get to the bottom of the page.But that effect doesn't happen instantly on my website because i have more javascript and i think it needs to go through all the code before it runs the effect and It's just not working properly.
Where is the problem ? .Here is what I have done : JSFIDDLE
var offset = 250;
var duration = 500;
$(window).scroll(function () {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
} else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').on('click', function () {
event.preventDefault();
$('html,body').animate({ scrollTop: 0 }, duration);
return false;
});
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$('.back-to-top').animate({ 'bottom': '400px' });
} else $('.back-to-top').animate({ 'bottom': '10%' });
});
It seems like adding a class that changes the position of the div, and toggling it when the condition is true solved the problem .
I'm developing a simple web application, I want to give the ability to the user to refresh the page with pull down refresh thing like android or iOs.
the refresh it will only lead to reload the page nothing else :
location.reload();
I'd like to use jQuery Mobile or Javascript.
jsfiddle DEMO
This is on body but you can have it in other elements of course. In this example html and body are with 100% height and different background-colors so you'll notice when dragging the body down. Mouse moves down more than 200px and page will reload.
var mouseY = 0;
var startMouseY = 0;
$('body').on('mousedown', function (ev) {
mouseY = ev.pageY;
startMouseY = mouseY;
$(document).mousemove(function (e) {
if (e.pageY > mouseY) {
var d = e.pageY - startMouseY;
console.log("d: " + d);
if (d >= 200)
location.reload();
$('body').css('margin-top', d/4 + 'px');
}
else
$(document).unbind("mousemove");
});
});
$('body').on('mouseup', function () {
$('body').css('margin-top', '0px');
$(document).unbind("mousemove");
});
$('body').on('mouseleave', function () {
$('body').css('margin-top', '0px');
$(document).unbind("mousemove");
});
This is a great plugin for pull to refresh
https://github.com/luis-kaufmann-silva/jquery-p2r
add the js to your head
script
<script>
$(document).ready(function(){
$(".scroll").pullToRefresh({
refresh:200
})
.on("refresh.pulltorefresh", function (){
location.reload();
});
});
</script>
<div class="scroll">
<div class="refresh">
Pull To Refresh
</div>
<div class="container">
content
</div>
</div>
do a minus margin-top on the scroll class to make the pull to refresh to be hidden, change refresh:200 to how long the pull takes to refresh. e.g at the moment its set to refresh after its pulled for 200 pixels
First, your application is in position to detect the scrolling event.
Do like this.
$(window).scroll(function()
{
if($(this).scrcollTop()>='somevalue may be your window height')
location.reload();
});
I think this is gonna work for you.
I have animated pop-up box that can be closed only when clicked on "X" button in left top corner. Do you know how to change it, so it can be closed by:
Clicking ESC button
Mouse clicking in background around pop-up
Any other suggestions?
Code
function openOffersDialog3() {
$('#overlay').fadeIn('fast', function() {
$('#boxpopup_3').css('display','block');
$('#boxpopup_3').animate({'left':'30%'},1000);
});
}
function closeOffersDialog(prospectElementID) {
$(function($) {
$(document).ready(function() {
$('#' + prospectElementID).css('position','absolute');
$('#' + prospectElementID).animate({'left':'30%'}, 0, function() {
$('#' + prospectElementID).css('position','fixed');
$('#' + prospectElementID).css('left','100%');
$('#overlay').fadeOut('fast');
});
});
});
}
pass ESC button id to closeOffersDialog() function, I think it will work