i have a SideBar Menu, how can i keep it open? If you go to the page, the Menu is closed and i must click on the Menu Button, to toggle it on. How can i keep it open, i'll close it myself.
Code:
<script type="text/javascript">
$('#nav-btn').click(toggleMenu);
$('main').click(function() {
if ($(this).hasClass('active')) {
toggleMenu();
}
});
function toggleMenu() {
$('#nav-btn, #sidebar, main, #cover').toggleClass('active');
}
</script>
for better practice, write your code inside a .js doc and put your code inside a
$( document ).ready(function() {
// Your code here
});
And not inside a <script> tag..
You can just add the active classes inside the HTML element (wihthout jQuery), if debugging is the purpose.
Try replacing toggleClass with addClass, should help.
Please edit your question and provide the full code (html & css) so we can help you further
Related
I have a small issue with Micah Godbolt's Responsive Multi-level Navigation with active parent links. It works great, except if the page loads slowly and you are hovering over the global nav, it can sometimes show two dropdowns. I'm guessing this is cause the javascript is not loading quick enough. Was wondering if anybody knew of an easy fix.
Here is the site I am using it on : http://library.buffalo.edu
If you refresh the page and hover over the links before the page fully loads, you see the problem screenshot of issue
I assume you are hiding your dropdowns with javascript so you could add style="display: none" on your divs or css and use hover function.
you havent post your html but here's example
$(".parent").mouseover(function() {
$(this).next("ul").show();
});
$(".parent").mouseleave(function() {
$(this).next("ul").hide();
})
or you can replace those with one click function and use jQuery toggleClass to toggle a class that have display: block on it
Below function will work. Try this
$(".nav-global li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
I'm including a widget in a page using PHP. The widget includes the following jQuery code, which is making all links open in an external page. Is there any way to override or neutralize this code so it no longer affects all links on the page?
Ideally, I'd like to wrap the widget in a div and specify those links to open in a _blank.
I am new to jQuery, so I appreciate any help offered.
$(document).ready(function() {
// change all links to open outside iframe
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});
If you do as you say and wrap your widget in a div like this:
<div class="container">
<!-- Your widget -->
</div>
You can select only the links inside that container like this:
$(".container a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
.container a selects anchor elements (links) that are children to that containing div, and will run your function on them.
Try it code
$(window).ready(function() {
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Peace of Paris
I want to use a simple js to deactivate and activate the overflow of the html "body" like this:
$('.my_link').click(function(){
$('body').css('overflow-y', 'hidden');
});
$('.featherlight_background & featherlight_close_button').click(function(){
$('body').css('overflow-y', 'scroll');
});
But I dont finde out the css name of the "featherlight_background" and the "featherlight_close_button" - ... ".featherlight:last-of-type" and ".featherlight-close-icon" dont work ;(.
That´s the script I work with: featherlight
Can anybody help me?
I would suggest solving it using the configuration options of Featherlight instead of adding jQuery events to its elements.
Looking at the Configuration section of Featherlights documentation it seems you can define a function to be called when the lightbox is opened or closed, see beforeOpen, afterOpen, beforeClose and afterClose.
You can either define those functions using a data attribute on the element, e.g. data-featherlight-before-open, by overriding the global defaults, e.g. $.featherlight.defaults. beforeOpen, or by adding them as a parameter to your featherlight call, e.g. $.featherlight('#element', { beforeClose: ... });
I've added a small example that uses the global configuration method to change the text Lightbox is closed into Lightbox is open when opening the lightbox.
$(function() {
$('#btn').featherlight('#lightbox');
$.featherlight.defaults.beforeOpen = setLightboxOpen;
$.featherlight.defaults.afterClose = setLightboxClosed;
});
function setLightboxOpen() {
$('#text').text('Lightbox is open');
}
function setLightboxClosed() {
$('#text').text('Lightbox is closed');
}
.hidden {
display: none;
}
<link href="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.js"></script>
<button id="btn">Open lightbox</button>
<p id="text">Lightbox is closed</p>
<div id="lightbox" class="hidden">
Lightbox contents
</div>
UPDATE WORKING NOW
Got it working now. Script snippet was wrong and was not even called somehow.
For future reference -> to close bootstrap tabs:
</script>
$("#closetab").click(function() {
$("#myTabContent").hide();
});
</script>
Close
And be careful when using center-TAGs for anchor texts. It screws with your js/jquery when pointing to IDs of content within the center TAG.
Im using Bootstrap Tabs ( http://twitter.github.com/bootstrap/javascript.html#tabs ) with a slightly changed bootstrap-tab.js to show tabs on hover:
$(function () {
$('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Now i want to add a way to manually close those tabs. I found a code snippet somewhere that does the trick in Chrome/Mozilla/Opera but not in IE:
<script>
$('a[href="#closetab"]').on('click',function(){
$("#flyout_tab").hide();
});
</script>
and
Close
In IE when i click the close-button it sends me to the root of the directoy the site is in.
I guess it has something to do with the way IE handles empty a href's (a href=""). When i put something like a href="#" it wont work in any browser.
Try putting "closetab" in the href property like this:
Close
Since the above code doesn't work, try changing the script to:
<script>
$('#closetab').on('click',function(){
$("#flyout_tab").hide();
});
</script>
I have created an accordion in such a way that only 1 set of content can be open at any one time, my problem is how do I update my code so I can click the active tab and close the content? At the moment if I try to close the active tab the content slides up and then slides straight back down?
Im sure I've written this code in the wrong way and would appreciate all advice on how to enhance this http://jsfiddle.net/kyllle/csggQ/1/
Kyle
Seems you are over complicating things :)
You've kinda already made it, http://jsfiddle.net/csggQ/21/
$(document).ready(function(){
$('p').hide();
$('h2').click(function() {
if($(this).hasClass('active'))
{
$(this).removeClass('active');
$(this).next('p').slideUp(600);
} else {
$('#myContent .active').removeClass('active').next().slideUp(600);
$(this).addClass('active');
$(this).next('p').slideDown(600);
}
});
});