I am creating a web page locally and I have the style from FSVS https://github.com/lukesnowden/FSVS
But because the Top page will be the one that will have my menu and slider, I don't want it to have the pagination bullets. Any suggestion?
I tried using code like
html.fsvs.demo #fsvs-body>.slide.nth-class-1 li{display: none;}
but it won't hide it. Here is the demo page of the FSVS also: http://luke.sno.wden.co.uk/full-screen-vertical-scroll
Try this:
html.fsvs .slide.nth-class-1 #fsvs-pagination li:first-child{
display:none;
}
I found the answer:
html.fsvs .active-slide-1 li { display:none;}
did it!
Related
I am making the navigation bar for a website, and I want to add nice effects to it. Now there is a dropdown menu with submenu's, and I want those submenu's to slide in. But for some reason it doesn't show the background when animating, and the text goes on top of the border next to it. Here is a link to what it looks like. There is something weird happening as well when hovering over multiple times.
for some reason I have to accompany links to jsfiddle.net with code, so here it is.
You missed setting the color for the the #parnavdrop ul li. JSFiddle
#parnavdrop ul li {
background-color: #41D4CF;
}
Actually the issue is you have mentioned background-color to inherit.
.nav ul #navdrop #subnavdrop{
background-color:inherit;
}
So it is inheriting background color from its parent which is causing the issue.
So the following code change can also resolve the issue.
.nav ul #navdrop #subnavdrop{
background-color:#41D4CF;
}
Sometimes just because of these stop() functions JS functionality is not working properly
This is my website which I am working on.
As you can see there is a sidebar in desktop mode. But when you see it in mobile mode the sidebar goes down under the content which is showing on the left side.
Now what I want in mobile view is to make sidebar appear on top, and after that the content should appear. I've tried lots of things like position:absolute; and margin but it's not working for me.
Please suggest what would be the correct way to do this task.
jsFiddle of my code
This works for me
<script type="text/javascript">
var windowWidth = $(window).width();
//window.alert(windowWidth);
if(windowWidth<=767){
$('.wf-span-4').insertBefore('.wf-span-8');
}
</script>
You should probably provide a simplified version of your code, however, here's what I've got.
You have one of two options:
change the structure of the site so that the order is reversed in
the first place.
Use jquery to move the content below a certain
width ex: $('#sidebar').insertBefore('#content')
The correct way imo would be to put your markup in the right order to begin with. Markup is structure and should be independent of styling (as much as possible).
Then your code would look something like this
<section class="main">
<div class="sidebar">Bye</div>
<main class='content'>Hi</main>
</section>
And all you would have to do is remove the floats on mobile, so the content goes back into the default flow. Something like this:
.content {
width:75%;
float:left;
}
.sidebar {
width:25%;
float:right
}
#media screen and (max-width:767px) {
.content, .sidebar {
float: none;
}
}
(note that I updated your class names and markup, just so the code would be a bit better readable)
And here is your updated demo: http://jsfiddle.net/ehozb5v9/2/
I have a pure css/html dropdown menu, the code for which I pretty much stole from csswizardry here. It works like a charm; the only problem is that, if that menu item is on the far right side of the page, the dropdown items are half-off the page.
I'm working on a javascript solution; is there a way to fix this problem using just CSS?
EDIT: I'm looking for the dropdown content to move to the left so that the dropdown items are fully visible.
Looking at the code you based it on, instead of
#nav li:hover ul { left:0; }
...you'd want:
#nav li:hover ul { left:auto; right:0; }
Looks like you may need to adjust the right margin of #nav li if you're using the same CSS as csswizardry.
I have a page which has 6 block menu choices and when you click one (e.g. '4') it shows block 4 content in a DIV opposite and will show the block as selected with an arrow.
When you click another block (e.g. '1') it will unselect 4 and then select 1 displaying block 1's content in the DIV.
I'm looking for the best script to do this in JS or jQuery. I'm guessing I could build the blocks as a listed menu and when selected, the CSS will display an image with the arrow.
Thanks
Update: Here's a mockup of what it will look like:
Another option instead of building yourself or jQueryUI tabs, I would prefer jQuery Tools Tabs:
http://flowplayer.org/tools/tabs/
They can be easily customized to your situation with some CSS adjustments:
http://flowplayer.org/tools/demos/tabs/skins.html
(just use some floats and width changes here to get what you're asking for, where XXX+YYY == width of wrapper)
#panes { width:XXXpx; float:right; }
#nav { width:YYYpx; }
#nav ul { width:YYYpx; float:left; margin:0; padding:0; }
#nav ul li { width:YYYpx; display:block; margin:0; padding:0; } /* no float! */
This is really well implemented in jQuery UI, which has a "tabs" feature.
You could use jQuery UI Tabs and opt to put the selectable options either along the top or along the side and it would behave just like you say you need.
http://jqueryui.com/
Demo of tabs is here...
http://jqueryui.com/demos/tabs/
Hey I am trying to make a topbar for my site as a navigation bar. This is what I get currently, how can I make it so that it's connected to the sides and to top. I don't want that space between the page and the bar. Sorry I am very beginner in this. See this picture to see what my page looks like now http://i55.tinypic.com/dgnpro.png
My CSS code for bar
#topbar
{
background-image:url(../images/topbar.png);
background-repeat:repeat-x;
width:100%;
height:50px;
}
add on your css html, body {margin:0; padding:0;} This will make your bar to start of your page from the start without any space.