At the moment I'm creating a responsive web site so that it works on mobile devices as well.
The design is of such a nature that I hide a vertical menu that also contains a facebook like button when the screen width is less than 480px.
When the width is less than 480px I then display a horizontal menu (that was hidden) that also includes a Facebook Like button for the same page.
In other words, when screen width is greater than 480px then a vertical menu is displayed and the horizontal menu is hidden. When width is less than 480px the vertical menu is hidden and the horizontal menu is displayed.
The above scenario means that there will be 2 Facebook Like buttons on the same page with the same URL set.
Will this create problems?
Related
I have a page where there are 3 panels adjacent to each other with width 4-4-4.
I am looking for a solution by which if any of the columns if minimized/collapsed.... then the other 2 panels could resize itself and take the space left behind by the collapsed panel and make their width 6-6.
Same again if of the remaining 2 panels if any of them if collapsed the left over panel should resize itself to take over the whole page 12.
Is there any javascript library available which gives me a optimum solution for this?
Does any one know how to use javascript with a media query?
I am wanting a left column menu which is hidden in mobile view using the bootstap 3 hidden-xs but I want to be able to click a menu button which overlays the left column over the main content area - which an x to close the menu. using
function showFunction()
{
document.getElementById("left-col").style.visibility="visible";
}
function hideFunction()
{
document.getElementById("left-col").style.visibility="hidden";
}
When testing this in a broswer this works OK but once I have clicked the cross to close the menu if I resize the screen to desktop or above the break point of the media query the left-col remains hidden.
Is there anyway around this? Or is it a waste of time trying and the benefit of this would work on a mobile rather than users on desktops resizing browsers.
Update --
In Desktop view I have 3 columns left Main Right with a header and a footer.
In Mobile I am stacking the right colum under the main hiding the left column on default
By clicking a menu icon i am displaying the left navigation over the main content, and click a cross on the left col to hide it.
But once I close the left-col when I resize to desktop - the left col stays visible and I want it to be forced back.
Thanks
Any help would be great.
Thanks
I'm using the pageslide.js to create responsive menu. it works fine when I manually shrink down the screen size. However, once I turn on the side panel and didn't close it. it would stay there when I drag the screen to wider size and the top menu showed. Unless I refreshed the page, the panel won't disappear.Any one knows how to fix the issue?
I am trying to style a NAV menu that is created and fed in dynamically by a SAAS CMS. I want the menu to auto resize into any given number of Columns.
For example:
If the NAV overall width is 960px. I want the menu items to resize in to say 5 equal columns.
Secondly the menu goes two children deep.
So if the top level is parant. this is seen by default on the page. When you hover the Children appear Similar to this site. http://www.laylagrayce.com/ (Ignoring the images in the menu.) I just want it to resize into equal columns.
How can I do this?
You have heard about responsive websdesign? In this case I think its the onlyest solusion.
I am using Twitter's Bootstrap fluid layout for my site. I have a collapse/expand accordion and inside of one of the sections, I have three columns that I would like to be separately scroll-able. These columns currently expand to the full height of their content, but I'd instead like them to expand to the viewport (viewable page) and show a scrollbar to get to the rest (when it is not already all visible).
The scrollbars will show up if I set the column to: overflow: auto; height: 500px;
I don't want to set the height; however, I want it to be set to whatever fits in the viewport.
I understand you can set a div's height to 100% in order to expand to the viewport; however, it has to depend on a containing elements height. I'm not sure how to deal with this within Bootstrap.
appart $('#collapseOne').on('shown', sizing()); not resizing properly if you resize after loading.
This is working pretty much ok on desktop.
http://jsfiddle.net/baptme/MwzvD/17/