I am trying to implement a javascript toggle effect for my "small" or mobile sized version of a responsive site. I am using my own custom WordPress theme.
I'm trying to use the script from this article: http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1
The tricky part is that I'm trying to include several divs, not just a single nav. If you look at the site now (which is still under construction), at:
http://66.147.244.81/~assureva/
and reduce your browser window to narrower than 540px, you'll see that I've managed to get my top navbar (smallnav), 2 "login" links, and facebook and LinkedIn icons, all to disappear, and re-appear when pressing the "main menu" button that now appears at the top, to the right of the logo. But I can't seem to add in the last part, which is the 4 links that comprise the main "nav". I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div, but the "smallnav", "logins" and "socialcons" divs all combine as desired in the "mobimenubg" div.
If I go ahead and set the "navbar" div to "display:none" it will disappear but it won't re-appear when I click the "main menu" button.
So I think the answer to ask the javascript to include the "mobimenubg" div AND the "navbar" div (the "navbar div is a container that includes the actual "nav") but I don't know how to write it properly.
Here's the javascript:
<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("#mobimenubg").slideToggle();
$(this).toggleClass("active");
});
});
</script>
Can someone tell me how add the navbar div? Do I add another line after:
$("#mobimenubg").slideToggle();
or can I include it in the parens:
$("#mobimenubg" IN HERE?).slideToggle();
I don't know the conventions -
Help greatly appreciated!!
I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div,
You actually have the right code, but your HTML structure is off. The navbar div is not contained within the mobimenubg div, and that is the problem. Just make sure to nest navbar there, or otherwise I think you can also call the function on the navbar like:
$("#navbar").slideToggle();
Related
I am using cubeportfolio to get masonry filterable portfolio. Worked like a charm, but then I wanted to add a toggle inside the cbp-item.
This is the result (watch it on mobile): http://www.lichaamengeest.be/AA.php
You can see that, when toggling the content in the first cbp-item, the content comes up behind the cbp-item below, instead of the toggle content pushing the next cbp-item downwards. The height is not set fixed, so it should move freely.
The coder of cubeportfolio told me to add this code
jQuery('.cbp').cubeportfolio('layout'); But my unanswered question is: where and how to add that code? Here's the js file with toggle code: http://www.lichaamengeest.be/scripts/custom.js
I think your problem is the „position: absolute” on the „.cbp-item”. If you wrote the toggle function on your own try to get the height of the box and add this as new position for the following box, when you click on to toggle. So that it's recalculated it after every click.
I have a JS conflict occurring and cannot figure it out.
My site is a one page layout that uses smooth scroll to move from section to section.
There are 4 scripts in particular that I believe are conflicting.
The problem is once I click an image to open it, the page bounces right back to the top instead of staying where it is. After closing the image popup, I have to scroll back down every time. You will also notice that after closing the popup image, clicking any nav button at the top forces a scroll from the top down and not from the current position (as shown earlier in the video).
This problem is even worse in Safari (Firefox does not do this part) as the active nav items do not display (green highlight) after closing a popup image.
Please have a look at a video screen grab I posted of the issue I am having.
http://whataprettyface.ca/video2.html
I have the Filterizr / Magnific Popup / Portfolio working perfectly on my mobile site. But the mobile site does not include the smooth scroll feature.
As mentioned above, I am using:
1) Magnific Popup v1.1.0 (Pops open images in forefront)
http://whataprettyface.ca/desktop/js/jquery.magnific-popup.js
2) J.Query Filterizr (arranges selected photo gallery)
http://whataprettyface.ca/desktop/js/jquery.filterizr.js
3) My 'Scripts' main JS (contain smooth scroll code)
http://whataprettyface.ca/desktop/js/scripts.js
4) And a 'portfolio" script:
$(function(){
'use strict';
// portfolio filter container
$('.filtr-container').filterizr('filter', '1');
// portfolio filter
$('.simplefilter li').click(function() {
$('.simplefilter li').removeClass('active');
$(this).addClass('active');
});
// portfolio image-popup
$(".image-popup").magnificPopup({
type: "image",
removalDelay: 300,
mainClass: "mfp-fade"
});
});
I have read about no.Conflict but am not sure how to properly implement it here or if it will even work.
I feel like the answer is before my eyes but I am a novice.
Any help is greatly appreciated!
To my dismay, the issue was not in my scripts at all. It was as simple as changing a few lines in my CSS.
By moving the 'hidden overflow' from the html/body and adding in to the portfolio container, the issue was resolved.
#work .container{
overflow: hidden;
}
I have an accordion-style menu that runs along the left side of my page. This is the script that I have written for each separate accordion button (they're stacked on each other):
$("a.about-us").on('click', function(eve) {
eve.preventDefault();
$(this).toggleClass("down");
$("ul.about-us").toggle()
});
I would like to have my page automatically scroll down to show a newly opened accordion if that open accordion extends beyond the bottom of the viewport.
This is what my HTML looks like for one of the buttons:
HTML for About Button
on the accordion parent add the css:
height:auto;
If you need further help please provide the HTML structure.
I have this JSFiddle which includes a Bootstrap Accordion embedded inside another Accordion, the issue is that the Chevron to the right does not now behave as expected.
As you can see by the code below, the chevron changes direction when collapse is triggered, however, now it is in an embedded accordion this doesn't appear to be the solution.
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
I usually prefer to do this with CSS - less messy than trying to detect which item opened/closed when you are nesting, or have multiple on a page.
1) Add the class 'collapsed' to your accordion headings if they are closed by default (bootstrap toggles this class, but if you don't have it present when the page loads, it doesn't get added until you open and then close an accordion item).
2) Get rid of the JS and add this CSS:
.panel-heading.collapsed .glyphicon-chevron-down {
transform:rotateX(0deg);
}
.panel-heading .glyphicon-chevron-down {
transition:transform .5s;
transform:rotateX(180deg);
}
If you don't like the flip animation, just get rid of the transition rule, but I like to think it adds a little something.
http://jsfiddle.net/rr7oggLv/6/
I am trying to create something similar to this effect, where you can click on the hamburger icon and a menu slides out:
http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
I don't need the hover event, just the click.
My problem is that in the above example, there is already space allocated for the menu to live. In my situation, I need my main content to shrink to make room for the menu. So, using Bootstrap, I am switching my main content from the "col-md-12" class to the "col-md-11" class, so that my menu with the "col-md-1" class can fit:
$('#toggle').mousedown(function () {
$('#mainMenu').toggleClass('col-md-1');
$('#mainMenu').toggleClass('zero');
$('#mainContent').toggleClass('col-md-12');
$('#mainContent').toggleClass('col-md-11');
});
I have attempted something here:
http://jsfiddle.net/955RV/
But it's not quite right. The negative margin trick is because I'm not sure how else to bring in the menu from the left. I also am not happy with the right side of the content shrinking in animation before the menu appears and would prefer it to happen simultaneously. My guess is that they are technically happening simultaneously, but that the margin animation takes longer to complete than the width animation.
Any help would be appreciated. Let me know if I can help clarify anything.
This looks like a great place to start:
http://tympanus.net/Blueprints/SlidePushMenus/
Notice the difference between the "push" and "slide" type menus. I was looking for "push."
Code explained here:
http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/