I created a menu in my website, this menu have 4 submenu.
But there is a problem on page reload / page load.
This is my page: http://www.substellar.it/nepsrl/
if you try to refresh the page, you'll notice that the 4 sub menus for one second are still visible.
Why?
This is the script that manages the submen:
http://www.substellar.it/nepsrl/js/menu.js
I can not solve this annoying problem graph.
This happens because you hide your menu after page is loaded. Instead of use $( ".nep-submenu1" ).hide();, you should hidde your menu on your html or css like this:
html:
<div class="nep-submenu1" style="display: none;">
css:
.nep-submenu1{
display:none;
}
Related
Is it possible to automatically reveal hidden div when loading an external page?
Redirected page has a div (date picker)that is by default hidden under a link:
<a class=" this-link" data-bind="fadeVisible: !isVisible(), click: change">Change</a>
On click the div is visible and link disappears.
It is set similarly to this example:
< button>show and hide</button>
<div id="mydiv"></ div >
#mydiv{
width:300px;
height:300px;
background:red;
display:none;
}
$('button').click(function(){
$('#mydiv').toggle('slide',500)
})
But i wish to have this immediately open (show ) on page load and, link to hide on click.
This 3th party tool is implemented to a page trough a widget.
I tried adding this example to a widget HTML code:
$(".change").show()
$('.change').css('display','block');
But its not working.
Can this be revealed trough JS or any other way?
Thank you.
You simply CANT
because of XSS policy in all browsers.
Actually i want to do open color box without popup and it need to be only show hide inside a div. can we target a div to open colorbox content.
<a href='#myGallery' class='group'>click here</a>
<div class=''><!--this must be container of colorbox, and disable popup-->
<div id="myGallery"><--some content with photo--></div>
</div>
function _teamPopup(){
$(".group").colorbox({
inline:true,
rel:'group',
href:$(this).attr('href'),
scrolling: false,
opacity:1,
width:100+"%",
});
}
on my web page , there is lot of thumbnails, when i click on it content must display without popup.and it can be next ,prev , close like colorbox group function.
please check below image and you can get some idea.
Use toggle function of jQuery to hide and show content inside an element
Why you want to change colorbox if its purpose is exactly to have a gallery popping up?
If you look around there are widgets more specific for the kind of problem you're having.
Check http://galleria.io/themes/classic/.
If you still don't like what you can find around why don't you just code the big div to change its image when clicking on a thumbnail?
I have some basic custom tabs setup that function using click events that show/hide DIVs.
FullCalendar isn't showing up on one of those tabs despite using the render function (docs).
$(".tabs .tab").click (e) ->
...
$("#calendar").fullCalendar "render"
The #calendar DIV is initially hidden, but from my understanding, the render function should force the calendar to render with each click. All of the other tabs work properly, so I know that it's not a problem with the show/hide functionality at all.
Does anyone know what might be going wrong here?
The problem ended up being related to the way I was showing/hiding DIVs-
The CSS selector that I was using to hide DIVs was too broad and ended up assigning display: none; to the calendar DIV (which was a child of the tab content DIVs).
The solution was to change:
$("#tab-contents div").hide()
To:
$("#tab-contents").children().hide
In the HTML the calendar was shown like this (in HAML):
#tab-contents
#tab-calendar
#calendar
#tab-other
...
Thanks for the help and suggestions, and I should have posted more code in the beginning.
There usually are problems with some scripts no being able to work correctly on hidden DIV's.
I usually load page with everything visible, and after about 200ms I hide everything, that needs to be hidden.
For bootstrap tabs, I set every tab container "active" class and for tabs menu, I use this trigger script.
setTimeout(function() {
$('.my-tabs-control a').first().click();
}, 200);
You could try this solution for your own script.
I guess my problem needs more explanation. I am trying to get my drop down menu to function correctly on the ipad. I have top level menu items and sub menu items. When I tap the top level, the sub menu drops down, which is correct. Then when I tap one off the sub menu items, my html page loads inside my index.html (#!affordable-holidays.html). The problem is that the sub level drop down does not disappear when the html loads dynamically. So once I have tapped a parent item, the sub menu is there forever.
I thought that having some javascript at the top of the dynamically loaded html to hide the ul would work.
I am not sure of the correct terminology of how the page loads as this was a purchased template. For an example, mysite.com would be the index, and then when I go to another page it is mysite.com#!second-page.html
How would I hide a ul in a menu when the page loads?
This is my html
<li>Tester
<ul class="menu-hide">
<li ><span class="title">PAY AS YOU GO</span></li>
<li ><span class="title">AFFORDABLE HOLIDAYS ALWAYS</span></li>
<li ><span class="title">HOW POINTS WORK</span></li>
<li ><span class="title">MORE THAN A ROOM</span></li>
</ul>
</li>
This is the javascript I have found that is close to what I want:
<script type="text/javascript">$("div.menu-hide").hide()</script>
But I can't seem to target ul.menu-hide. I have tried this
<script type="text/javascript">$("ul.menu-hide").hide()</script>
You appear to be missing your document.ready call
<script type="text/javascript">$(document).ready(function(){$("ul.menu-hide").hide()});</script>
also ensure that the link to your jQuery library is declared before your other javascript
http://api.jquery.com/ready/
try this
<script type="text/javascript">
$(window).load(function () {
$("div.menu-hide").hide()
})
</script>
you can also use the
$(window).ready(function () {
$("div.menu-hide").hide()
})
but the difference is that The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet.
The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images.
Good Read
$(document).ready vs. $(window).load
Hiding an HTML element on page load via JavaScript will result in the element producing a flickering effect when it is displayed and then hidden.
I would hide the element with your css file, and then show via JavaScript.
css code:
.menu-hide{ display: none; }
jQuery show code:
$(function(){
$('.menu-hide').show();
});
on http://tinyurl.com/75tx5hn when i click onto "Über die App" or onto "Screenshots", the Website scrolls down. to the header, have u got an idea how to avoid that problem?
Strangely this only happens on Firefox and IE , not on Chrome?
ok found you problem
find that line in your page code
<div id="about" class="pane" style="display: block; "> <!-- Start About Page -->
id="about" in tag is causing this problem. this will be resolved if you change this id name
:)
use focus() function of javascript to show div with class="header"
eg document.myform.mytextfield.focus(); to set the focus on click of button
That is the expected behaviour, considering that the link is anchored to a div on the same page:
<li>Über die App</li>
...
<div id="about" class="pane">
You can kill that behaviour like this (you have jQuery included on your page):
$(".tabs.page a").click(function (e) {
e.preventDefault();
}):
...or just by removing the ID on the div.
The problem is that your link is linking to #about (id="about"), the browser will try to go to that section displaying it in the top of your browser.
Testing :
User your browser and zoom into the button, then click on the link. You will see it will display the ABOUT content section with ID = about.
Solution :
Change ID's of the content
OR change hrefs of links
OR set a jquery event to prevent default browser actions.