how to display custom drop down on top of slider as per below image
i have used below link for slider
http://www.bitrepository.com/content-sliders.html
and for drop down, i have used below link
http://www.mindstick.com/Articles/f649279c-dc3a-42cb-ab10-e24ae9a1bb90/?Stylish%20Dropdown%20in%20HTML
any suggestion will be appreciated.
Please help me!
Thanks in advance!
By looking at the demo of the slider you are using i think the problem is in <div id="featured"> because it has css property overflow:hidden so anything outside that div 'll not be seen.
Just like Adrift said I think it will be better if you provide Fiddle demonstrating your problem. If you can't then for your dropdown like
<div><!-- You content slider main DIV -->
<select style="position: relative; z-index: 1000;"></select>
</div>
You can use class instead if you do not like to use inline style.
Related
I have 5 divs going vertically down a page.
I want to be able to click any one, and have it move to be the first div in the order, the top of the "list" in a way. In a perfect world, the others would dim/decrease opacity and the clicked one would slide/animate up to the top while the others bumped down. But, that can come later. I've seen div-reordering done with CSS, but that's not continuously dynamic on the page.
I tried putting all 5 divs inside a container wrapper and doing this in css:
#wrapper { display: table; }
with this javascript (example for clicking second div):
$('#secondDiv').css("display","table-header-group");
$('#firstDiv').css("display","table-row-group");
$('#thirdDiv').css("display","table-row-group");
$('#fourthDiv').css("display","table-row-group");
$('#fifthDiv').css("display","table-row-group");
but that messed up my rounded corners on the div, my alignment, and other parts of my existing css.
This seems like it shouldn't be that hard, but I can't figure it out. Thanks for any help!
A very simple solution: move the element to the top using jQuery's prepend() to the parent element.
$("div").click(function() {
$(this).parent().prepend($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<div>Div6</div>
<div>Div7</div>
<div>Div8</div>
<div>Div9</div>
<div>Div10</div>
$('.reorderable').click(function(){
$(this).prependTo(this.parentNode);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="reorderable">first</div>
<div class="reorderable">second</div>
<div class="reorderable">third</div>
<div class="reorderable">fourth</div>
<div class="reorderable">fifth</div>
</div>
Look at the jQuery UI tools that enable sortable displays.
Your end goal seems to be consistent with this jQuery UI feature.
Every time that the scroll bar reaches the sticky menu it shifts the menu over a few pixels. If you scroll down slowly on my website and watch the menu you can see it.
I'm using the JQuery plugin stickUp to accomplish the sticky menu. I found that the only way I could get the menu to stick to the top without jumping to the left was by putting the "buttons" class inside of another class called "menu" and setting the width of "menu" to 100%. But that just resulted in the tiny little jump you can see now.
<body>
<div id="page1">
<div id="p1content">
<h id="Name">Travis Morenz</h>
<p>Testing & Testing</p>
</div>
<div class='menu'>
<div id='buttons'>
<div>Home</div>
<div>Projects</div>
<div>About</div>
</div>
</div>
</div>
<div id="page2">
<div class='behindmenu'></div>
</div>
I tried setting up a JFiddle to make it easier to view but the sticky menu doesn't work inside of it.
The code, however, is the same. Any help would be greatly appreciated.
In your site, when you scroll down .menu stuckMenu isStuck is getting style and got position:fixed and top:0 but you have to add left:0px then div wont move.
just add left:0px to .menu stuckMenu isStuck and it will work. Please let me know if it wont help or for more explanation.
UPDATED
When you scroll down then by jquery there is class added to .menu stuckmenu and it gives position:fixed and top:0 means fixing the div at one place so you should remove the left part too by using left:0 so it will be in center of screen.(top:0 and left:0). I will update the answer as soon as i will get more clarification.
OFFTOPIC
Your content of page 2 will hide the button but if you will hover then it will look like bugs so i have a suggestion that in .menu stuckMenu class add background:white and it will look great..hope it will help. :)
In this id #p1content you have used css which is not good..to center this column you should use margin-left:auto margin-right:auto with width:80% and you column will be responsive also. Never use fix width, its not good practise.
Concerning your question why it was moving: It received some additional style. A position left of 8px.
See screenshot.
This plugin seems to change the position from relative to fixed.
Moreover it adds top- and left-properties.
It gets moved since position gets changed to position: fixed; when you scroll down and it then ignores the margin of the body, making its own margin bigger.
CSS
body {
margin: 0;
}
I had no problems adding a Facebook/Twitter sharing buttons but right now Google+ is driving me crazy, WHEREVER i put this code on my page (using Bootstrap grid), i get a 2-3 pixels on the right creating an horizontal scrollbar:
<div class="g-plus" data-action="share" data-align="left" data-annotation="none"></div>
Plus Script code at the bottom of my page:
<script src="https://apis.google.com/js/platform.js" async defer>{lang: 'fr'}</script>
Any idea how to fix it? I've tried to put my div in another div with fixed width and stuff like that but no effect, the script is replacing the div and forcing all css regardless my attempts ... i have no idea what is replacing the original div and how to work on it.
I'm a bit lost here, help welcome, thanks.
I had a similar problem and this worked for me:
iframe[id^="oauth2relay"]{
display: none!important;
}
Taken from this tutorial: https://www.youtube.com/watch?v=4vYfnZ_XB8M
Try inspect the button and find out which element has the scrollbar and add this CSS on it.
overflow: visible;
this solved my problem
iframe[id^="oauth2relay"] { position: fixed !important; }
G+ button adds an iframe.
I am trying to implement a JQuery slider next to some text and span in a table cell.
<tr>
<td>
Transfert: <span id="Trans" /> <div id="TraSlider" />
</td>
</tr>
Unfortunately, the slider will not stick to the right or the text. It seems like div is the issue. I tried to change it to span, but the slider is not displayed properly anymore.
How can I achieve this (without moving the slider to another cell)?
P.S.: Here is a JsFiddle.
It seems like it just to be inline-block and with a width. With that in mind, see this fiddle:
.ui-widget-content {
display:inline-block;
width:100px;
}
you can (display: block) in the css for those cntents, but the ordering of those contents will always make a difference .
or you can try to make the slider div floated to right with CSS so the other stuff are not in affection with it's absolute place .
Looks like someone beat me to it while I was fiddling. Here it is anyway.
-- .val() works on inputs FYI.
// css and table width will squeeze your text so:
http://jsfiddle.net/devitate/MTD78/3/
Is there a 'best practice' how to hide all except one content-DIV of an HTML5 website?
Is there also a 'most used' library/libraries? Or is it often written in own JS code?
My goal is to have 9 DIVs loaded. The one in the center is the navigation, the others are content. When a nav-point is selected the specific div 'slides' to the middle and all the other DIVs are hidden.
Thank you
I usually do this:
$('.your_div').show().siblings().hide();
Replace .show() and .hide() with your desired effects.
I would add a class to all the hide and show able divs probably a class name like section.
<div class="section" id="home"> home content here... </div>
<div class="section" id="page-slug"> another page here... </div>
<div class="section" id="contact"> contact information here... </div>
Then give each div an id. FInally, in order to show the contact section you would:
$('#contact').show().siblings('.section').hide();
This method of giving like elements the same classand giving container elements an id is really just good practice regardless of the ease of use when selecting jQuery elements.
Jquery's hide, .show or .toggle are good enough.