Is it possible to call the sidebar by swiping left(or right) on the body? without any button to trigger.
Thanks. I am using semantic-ui's sidebar. It's much nicer if i can make it work with semantic-ui's sidebar. But if that's not possible it's okay. Thanks.
You can use jQuery for this, just place a div where you want to swipe.
$("div").on("swipe",function(){
$(menu).show();
});
You only have to put in the names now :)
You can also do swipe left or right, here is a link to further explenation:
http://www.w3schools.com/jquerymobile/event_swipe.asp
Related
I deal with the following problem.
I have a wordpress theme in which there is a left side menu that when I press the hamburger button, it pushes the whole content, header and main container to the left.
What should I look into?
I have tried changing position from fixed to absolute and overflow to overlay but I might now doing it correct.
I cannot provide code because I don't know which file is responsible so, any chance where should I look into?
I am talking about Atelier theme.
Thanks a lot in advance!
This somewhat depends on how the menu is implemented, and without further details it's somewhat hard to say 100% what will work for you.
That said though, if you want to display your side menu over top of the content without pushing it to the right then you would want to set the Z-Index of the menu such that it renders above the rest of the content on the page.
Here is some details that might help you achieve what you are looking to do:
Z-Index
Setting the position attribute for the Manu should do the trick. More information: CSS position property
When you click on hamburger. please check body or content added margin for left side. if left side content margin added then remove margin-left: 0px !important. If added new class then help with jQuery remove this class when your click on hamburger.
I have a problem with Wordpress.
I let a sidebar disappear using style:display:none;
And now I want to use that place that was used by that sidebar.
For example: There is a text placed left and right was the sidebar.
And if I now set width:100% for that text it doesn't fill that used place of sidebar.
Thank you!
Ok, I found the problem.
My theme used flex. So I changed everything about flex and used that place used for sidebar.
The problem is that I should have build everything else with flex. Therefor I didn't use that and instead I put that information I wanted to use in that place of sidebar in the sidebar and modified it with placeholder sidebar element. It is not the perfect way, but it works ;)
Rather than putting exact code down, i wish to ask a conceptual html/css/js question.
Normally a lightbox works by being placed on top of everything on the page using a z-index. What if you didnt want the lightbox on top of everything else? But instead push the footer down to make room for the new content. My gut feeling tells me that if you create the same z-index, and make the positioning relative, it should push all the other div's down. However this is not quite working.
I am trying to achieve the following: The user clicks a thumbnail, which pushes the footer down and opens a new div on the centre of the page with some content. If they decide to press an 'X', it closes the div, return back to the original thumbnail, moving the footer back up the page.
I thought using a lightbox, and modifying the code would be the quickest and easiest way. However i might be going about this all wrong. Any thoughts?
Thank You.
z-index is used only for elements that are stacked on top of each other. This doesn't seem to be the case for what you're trying to achieve.
You need to place the lightbox between the footer and content and set it to be hidden initially and whenever user clicks on the thumnail show the modal with javascript/jquery:
$(".thumb").click(function(){
$(".modal").slideToggle()
})
Here's a simple demonstration:
fiddle
Is there a way to make the jquery mobile List divider header be fixed at the top of the page until the next letter or list divider comes up and takes its place, like in the iPhone UITableView?
(http://jquerymobile.com/test/docs/lists/lists-divider.html, the list dividers dont stay at the top but rather scroll up and down with the page.)
I've already search on SO (http://stackoverflow.com/questions/7814088/how-to-make-jquery-mobile-list-dividers-fixed-at-top) but the link seems to be down..
Thanks for your help in advance.
There's a great plugin which does exactly this, and gives you custom events etc. The project is available on GitHub and there's also a showcase article about it.
You'd have to port this: stickySectionHeaders
Is this the same thing: https://github.com/jquery/jquery-mobile/blob/master/experiments/scrollview/lists-divider.html ?
I have a css menu, pretty standard functionality. I have implemented it within a Netsuite site im working on.
The menu is visible here:
http://www.gardensandhomesdirect.co.uk
Its the one just under the header.
Ive been trying to get the only part of the menu with dropdowns to come left instead of right when hovered so that it is not being 'hidden' underneath the wrapper.
What is the best way to get this menu showing correctly? I there a way i can get it hover over the top of everything else instead of underneath like now?
Any help appreciated.
-Wayne
You need to have overflow: visible on #outerwrapper if you want to show anything outside that div.
Alin