Im new to mootools.So please help me for the problem Im facing.I had a div which consists a href If I click then it will enter into a javascript file and it consists of color method.In that method I kept a script for by usng scroll method.According to my script.If that div is at the top and i click on href it shoud show redcolor and if the scroll is greater than zero then it should show another black color.But what happening is If i scroll down and click it intially it was showing red and it i scroll a bit then it showing black.My code is
window.addEvent('scroll', function () {
var scroll = window.getScroll().y;
if (scroll > 0) {
black
} else {
red
}
Can I know how to call scroll method as soon as it enter into color method in mootools
That is normal since you invoke the method when the window scrolls and not when you click the button as it will invoke the color method each time you scroll. Each time you click you want to know the updated scroll position not when you scroll the page without clicking the button (hope I understood that well...). And on page load you initially set the background-color to red.
var link = $('link');
var box = $('color-box');
link.addEvent('click', function(event){
event.preventDefault();
changeBgColorBox();
});
changeBgColorBox();
function changeBgColorBox () {
var scroll = window.getScroll().y;
if (scroll > 0) {
box.setStyle('background','black');
} else {
box.setStyle('background','red');
}
}
Here is a jsfiddle: http://jsfiddle.net/Bwv3S/40/
To invoke the method only when you scroll the page you would not need to invoke the method with the link being clicked at all. You would invoke the method onload or ondomready and onscroll.
http://jsfiddle.net/jLPpa/9/
Related
im working on a site and I created my own menu for the website.
So the menu is hidden away in 0 opacity and z-index -1.
on button click the menu will show at the screen.
https://williamhrtanto.com/msa/about/ this is the site im working on so you guys can check directly how it currently works
the current problem is that whenever I click on the button to show the menu, it will go back to the top of the page
Im asking on how to wherever i click the menu will show up and wont move back to top of the page.
I've tried with fixed position and absolute position
thankyou
You have this JS code on your page:
<script>
jQuery(document).ready(function($){
// now you can use jQuery code here with $ shortcut formatting
// this will execute after the document is fully loaded
// anything that interacts with your html should go here
var buttonMenu = $('#menuButtonContainer');
var menuScreen = $('#menue');
buttonMenu.click(function(){
//alert('clicked');
if(menuScreen.css('opacity')=='0'){
menuScreen.css('opacity', '1');
menuScreen.css('z-index', '999');
}
else {
menuScreen.css('opacity','0');
menuScreen.css('z-index','-1');
}
});
});
</script>
in this place:
buttonMenu.click(function(){
//alert('clicked');
change to
buttonMenu.click(function(e){
e.preventDefault();
//alert('clicked');
note the e added as function argument and the new line e.preventDefault();
Remove opacity
Set display : none, position : fixed
After click set display block
You need to cancel the default event of the anchor tag.
Use this
$("#buttonMenue").click(function(evt) {
evt.preventDefault();
});
I have a webpage that will dynamically load each time it's refreshed. If a user is editing an entry in the webpage, drills into a link for example. Then tries to press the back button, or hit a tab corresponding to the previous page also, how can I save the vertical scroll bar position and return them to the same position when clicking either the back button or the tab corresponding to the same page.
I've tried this, but it works for only pages that aren't dynamically loaded.
How can I retain the scroll position of a scrollable area when pressing back button?
You could use the same function in the question you linked but listen to the scroll event as opposed to the page unload event. That way the scroll position will be updated and stored every time the user scrolls.
Since the page is loaded dynamically, you can trigger an event once the content is loaded, that will cause the page to scroll:
$.get('/resource').done(function(){
// Render...
// Add a trigger after the content is loaded and rendered
$(window).trigger('content:loaded');
}
var prevScrollHorizontal = 0;
var prevScrollVertical = 0;
$(function() {
$("div#element").scroll(function() { // Listens for scroll events
var currentHorizontal = $(this).scrollLeft();
var currentVertical = $(this).scrollTop();
if(prevScrollHorizontal != currentHorizontal) {
prevScrollHorizontal = currentHorizontal;
localStorage.setItem("scrollPositionHorizontal", currentHorizontal);
// Scrolled horizontally
}
if(prevScrollVertical != currentVertical) {
prevScrollVertical = currentVertical;
localStorage.setItem("scrollPositionVertical", currentVertical);
// Scrolled vertically
}
});
// Listen for the 'content:loaded' event triggered above
$(window).on('content:loaded', function() {
if(localStorage.scrollPositionVertical) {
$("div#element").scrollTop(localStorage.getItem("scrollPositionVertical"));
}
if(localStorage.scrollPositionHorizontal) {
$("div#element").scrollLeft(localStorage.getItem("scrollPositionHorizontal"));
}
});
});
You can separate the different stored scroll objects using the window.location.pathname value to differentiate them:
$(function() {
$(window).scroll(function() { // Listens for scroll events
var scrollPosition = $("div#element").scrollTop();
// Uses the pathname to set the scroll value
localStorage.setItem("scrollPosition_"+window.location.pathname, scrollPosition);
});
if(localStorage.scrollPosition) {
// Uses the pathname to get the scroll value
$("div#element").scrollTop(localStorage.getItem("scrollPosition_"+window.location.pathname));
}
});
Read more about the scroll event here.
and more about jQuery trigger() here
This is my website .
It has a top menu and a sidebar menu. When the page loads up, the side bar is by default visible. There is no problem in Desktop, but when this is viewed on Mobile device, the side bar comes above the content of the website and it is not possible to remove it, since the toggle button to show/hide it is in the top menu.
Is it possible to make it hidden by default when the page loads up ? (Problem 1)
Also, if it works, then the show/hide sidebar works fine in desktop, but if we minimize the brower window, it becomes opposite, like, when it is hidden, HIDE SIDEBAR is displayed, when it is shown, SHOW SIDEBAR is displayed.
The jquery code I used to Hide/Show side bar is:
var f=1; // to displayd HIDE, since by default its shown.
$(document).ready(function(){
$("#menu-toggle").click(function(){
if (f==0)
{
$("#menu-toggle").html("<b>Show Categories</b>");
f=1;
}
else
{
$("#menu-toggle").html("<b>Hide Categories</b>");
f=0;
}
});
});
Is it possible to know if I am on mobile or desktop, so that I can initialise the value of f accordingly? (Problem 2)
Add one more line in $(document).ready to trigger click event on page load as below:
$(document).ready(function(){
//Event code start here
....
//Event code end here
$("#menu-toggle").trigger('click') //trigger its click
});
For your 2nd problem you will get lot of javascript solutions if you
search, like one here and another here
using toggle will be more convenient than click,if u want to make it hidden when the page loads up ,set display none first in html(simple way)
$(document).ready(function(){
$("#menu-toggle").toggle(function(){
if($(this).css('display') === 'none')
{
$("#menu-toggle").html("<b>Hide Categories</b>"); //this is hide
}
else
{
$("#menu-toggle").html("<b>Show Categories</b>"); //this is show
}
});
});
I have a fancybox popup in which I have multiple accordions. So the size of the popup varies on clicking of these accordions. Each of the accordion is an anchor tag.
On expanding one or more accordions, there is a limit(max-height) to which my popup will expand, after which the content inside the popup becomes scrollable, i.e, the content inside the div with class .fancybox-inner .
Whenever an accordion is clicked I call $.fancybox.update() as the popup need to be re-sized and respositioned.
But $.fancybox.update() resets the current scroll position of the content inside popup.
So i made this function adjustPopup and call it when any of the accordion is clicked
function adjustPopup(target) {
var fancyboxInner = $('.fancybox-inner')[0],
scrollTop = fancyboxInner.scrollTop;
//$.fancybox.update() function resets the vertical scroll of fancybox popup, so we store the
//scrollTop before calling $.fancybox.update() and then assign it back when updated.
$.fancybox.update();
fancyboxInner.scrollTop = scrollTop;
}
But this doesn't work. Even though i set the proper scrollTop value its again reset to 0 somehow.
Does anyone know whats the issue here?
I found the solution.
I had to dig into $.fancybox.update() function where I found that this function does stuff asynchronously. So my scroll was getting reset even though I was setting the scroll right after calling update.
I realized that there is an event 'onUpdate' on which the update is actually completed.
So I modified my adjustPopup function to this:
function adjustPopup(target) {
var fancyboxInner = $('.fancybox-inner')[0],
scrollTop = fancyboxInner.scrollTop;
//$.fancybox.update() function resets the vertical scroll of fancybox popup, so we store the
//scrollTop before calling $.fancybox.update() and then assign it back when updated.
$.fancybox.one('onUpdate', function() {
fancyboxInner.scrollTop = scrollTop;
});
$.fancybox.update();
}
Thanks to everyone who might have put time into this.
According to this answer and Fancybox forum this works:
$('.image').fancybox({
helpers: {
overlay: {
locked: false
}
}
});
I have a page with an HTML FORM to add/edit/delete Project Task rows. They are saved to a Database.
As this page can be very long/tall, right now there is a SAVE button at the top and bottom of page that uses AJAX to save all changes.
To make things easier, for the user to make a SAVE I am wanting to show a FIXED DIV across the top of the screen with a SAVE button.
This FIXED DIV should only show up when there are Un-Saved changes. So when the page load you do not see this right away until you make a change on the page. At that point it comes into view.
Clicking the AJAX Save button saves the Task records to Database and then the Fixed DIV/SAVE Button will go hidden again until another Change is detected.
Right now I have this like 90% working.
I have JavaScript which has EVENTS which call my showTaskUnSavedChangesHeaderBar() Function which is shown below when:
Text Input is changed
Textarea changed
Selection dropdown changed
Button Clicked to Add a New Task Row
Button Clicked to Delete Task Row/record
So as you see I have the code in place to Detect a CHANGE on the page. This then Triggers my Function which makes my Fixed DIV with Save button come into view.
Now once you click the Save button I saved the Data using AJAX and then call my hideTaskUnSavedChangesHeaderBar() Function which is also shown below.
This makes the Fixed DIV with Save button go back to being Hidden with it's CSS display: none property set.
Up until this point everything described above works as expected, except in my showTaskUnSavedChangesHeaderBar() Function I added some code to make the Fixed DIV only show when you are scrolled down the screen at least 100px so that it is not shown at the very top of screen right now.
This scroll trigger part also works fine.
The problem is, once you make a save and hideTaskUnSavedChangesHeaderBar() is called, it Hides the Fixed DIV but as soon as you scroll at all again, it keeps showing back up, even though no new CHANGES have been made to the Data on screen.
Just looking at the code below, can someone tell me what I am missing? When my hideTaskUnSavedChangesHeaderBar() Function is called and the DIV is hidden, it should Re-set the process until another Change on page is made but I must be missing something because as soon as it goes hidden a single px scroll up or down triggers it back into view again
UPDATE
It seems like when my hideTaskUnSavedChangesHeaderBar() Function is Called, I need to somehow kill this Event $(window).scroll(function() until the showTaskUnSavedChangesHeaderBar() Function is called again, is that even possible though?
I realize a JSFiddle page might be helpful, I will work on setting one up if there isn't a simple solution posted soon. I held off as my page is really complex and i'll have to dumb it down a lot to get a Fiddle working for the demo
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function showTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
var fixmeTop = 100;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
unSavedChangesHeaderBar.css({
display: 'block',
position: 'fixed',
top: '0',
left: '10'
});
}
});
}
}
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function hideTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
unSavedChangesHeaderBar.css({
display: 'none'
});
}
}
You bound an event in your function
$(window).scroll(function() {
So after that this code will always fire on scroll. If you call showTaskUnSavedChangesHeaderBar it will even bind the handler multiple times, making it fire multiple times.
Solution
You have to unbind this event handler when not needed anymore. Even better would be to put it somewhere outside and just switch a flag variable in your functions so that your scroll handler knows what to do.
.hide-me { display: none !important; }
For hideTaskUnSavedChangesHeaderBar method call addClass('hide-me') and in showTaskUnSavedChangesHeaderBar call removeClass('hide-me')
Now the scroll event won't override display to 'block'.