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
}
});
});
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();
});
On our Magento Website we have a mega-menu which appears when the mouse hovers over a parent li element in the menu.
However, if you hover over the menu immediately as the page loads, the mega menu does not appear properly.
It's much worse if the user has a poor internet connection.
After checking the chrome inspector I see this is because the class over is not added to the parent li. If you wait a second or two and move the mouse out & back over the parent li element the over class is added and the display css property of the mega menu is changed to block.
I've found the javascript adding the over class, it's part of the theme that we are using script.js.
// CODE OMMITED FOR BREVITY
jQuery(window).load(function() {
// CODE OMMITED FOR BREVITY
if(jQuery('#nav-wide').length){
jQuery('#nav-wide li.level-top').mouseenter(function(){
jQuery(this).addClass('over');
if(mobileDevice == true){
document.addEventListener('touchstart', wideMenuListener, false);
}
});
jQuery('#nav-wide li.level-top').mouseleave(function(){
jQuery(this).removeClass('over');
});
// CODE OMMITED FOR BREVITY
}
// CODE OMMITED FOR BREVITY
});
Any idea why this javascript would take so long to load? Or how I could improve it?
I think I've figured this out.
The theme is adding the over class within the jQuery(window).load(function(){}); which loads when everything on the page has loaded i.e. when all images, objects & frames have loaded. And we are using facebook widget (frame) on most pages.
The jQuery(document).ready(function(){}); function loads when just the HTML Document is ready, which would be much sooner, almost a second in our case.
So I simply moved theme's mouseover event listener within to the jQuery(document).ready() function
I am kind of simulating that I have multiple pages by defining 2 divs that each act as a page. Only one page at the time is shown. Those divs are:
divProjectList
divProjectListItem
When the user opens the website, the div 'divProjectList' is shown. This div contains an un-ordered list with projects. This is a long list, so it is sortable.
As soon the user clicks an item from the list, I do a $('#divProjectList').hide() followed by a $('#divProjectListItem').show(). The list is now invisible for the user and instead is presented with project details for the item he selected from the list.
As soon as the user clicks the close button it works the other way around. The project details page is being hidden and the project list page is being shown again.
If the user scrolled down a bit (or a couple of pages) then the project list is scrolled back to the first item and the item that he clicked is now out of view.
I have a JSFiddle that has a hide- and show-button and a list which simulates the behavior that I described above.
I would like to know if it is expected behavior what I see here and how I could circumvent this. For now I solved it by doing a $.ScrollTo:
$('#' + currentProjectId).ScrollTo({duration: 0, offsetTop: 151})
This jquery code reminds you where you scrolled to, and puts you back there when you press the show button:
http://jsfiddle.net/py7zemLo/1/
jquery:
var scroll;
$("#btnHide").on("click", function (e) {
scroll = $(document).scrollTop();
// $("#divOptions").hide();
$("#divOptions").css('display', 'none');
})
$("#btnShow").on("click", function (e) {
// $("#divOptions").show();
$("#divOptions").css('display', 'block');
if ( scroll !== null ) {
$(document).scrollTop(scroll);
}
})
I hope this helps you!
I've just found this basic JavaScript for what I need for a collapsible menu. Is there away to have it so the hidden content doesn't load up first?
I have it appearing on page load in the css for accessibility if a visitor is visiting with JavaScript turned off, but I would like this code on page load to not show the hidden menu.
Also, is there away to animate it to so it looks nicer when it collapses and expands?
function toggleMenu(objID) {
if (!document.getElementById) return;
var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'none')?'block': 'none';
}
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.