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();
});
Related
I have a wordpress site.
I add custom thumbnails in product section, it shows vertically. I just add the jquery code following:
$(document).ready(function(){
$('.active-thumb-link a').click(function(e){
e.preventDefault();
var imgSrc = $(this).attr('href');
var imgFind = $(".flickity-slider > div > a ").each(function(){
if($(this).attr('href') == imgSrc){
$(this).closest('div').css({"position": "absolute", "left": "0%"});
}
});
});
Code Motive: When user click on thumbnail image =, this fucntion get the "href" attribute of the clicked image. This "href" and image src is same that i want to display in product image div. i also add some css in jquery code for display the image. Everything is working fine.
Issue is: Suppose 4 thumbnails appearing as ascending order like"
THUNMB1
THUNMB2
THUNMB3
THUNMB4
When i click first time thumb1,thumb2,thumb3,thumb4 it works,
But when click like this order
1.) Click thumb1 works good
2.) Click thumb2 works good
3.) Click thumb3 works good
4.) **Click thumb2 Not works after that nothing works when i click on previously clicked thumbnail again. This is the main issue**
Thanks! Plz help me
You need to reset the images that are not being clicked back to their normal position. Inside your if-statement you could set all images to whatever first position they initially have, and then change the position of the closest one, like your already doing.
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
}
});
});
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/
I'm developing a comment system using jquery. Actually i'm stuck at the portion of displaying the portion, which displays the form at particular index. Suppose that i've 5 links. If i click on the 4th link, the form should be displayed at the 4th link position. But whenever i click on any of the link position, the form is getting displayed at the first link position. This should display as we see in a commenting system. I don't know if have to get some row position or something like that. A sample code from the jsfiddle has been posted below. If i have 3 links, whenever i click on any link, the form will be displayed at first link. I would like to fix this issue. Please help. Thank You
Here's the jsfiddle link
"http://jsfiddle.net/5UMe9/1/"
(function($) {
$.fn.commentSystem = function() {
//var settings = $.extend({index:ind});
//if(settings.index)
$(this).show();
}
}(jQuery));
$(document).ready( function() {
hideForm();
createLink();
onLinkClick();
});
One way to accomplish your goal is to append the form to the div element that has the currently clicked link. In that case, you could pass in the clicked element, and append your form inside the commentSystem method.
Here's a jsfiddle: http://jsfiddle.net/ZDgx6/1/
JS:
(function($) {
$.fn.commentSystem = function(link) {
$(this).insertAfter(link).show();
}
}(jQuery));
.
.
.
$(".link").click(function(e){
$(".Form").commentSystem(e.currentTarget);
});
I have a div in the middle of my web page that is placed in front of an iframe the with links along side of it. I would like to hide the div once any one of the links are clicked. How would I go about doing this using javascript? I am very new to this so please be as descriptive as possible so that I can understand.
Here is some of my html code. I have a number of links that appear in an iframe. I have the logo div positioned on top of the iframe and it loads when you enter the site. However I want to hide the logo when you click on anyone of the links.
<li>My Resume</li></br>
<li>My Course Work</li></br>
I used the jquery code noted by Dolours below along with extra coding within my the body of my html code, when you click on a link then the div disappears as I intended but then it reappears once you click on another link. I want it to disappear and stay away. Here is the additional code that I came up with
About Me
Does anyone know how I can make my logo stay away?
You can do this using jQuery:
// Get the iFrame jQuery Object
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
// Find the link to be clicked
var link = frameBody.find('.link_class');
// Set the on click event for the link
link.on('click', function() {
// Hide the div inside the iFrame
$('#divID').hide();
});
});
You can use the code below
$('a').click(function() {
$('#divID').hide();
});
Assuming all links will load the iframe.