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.
Related
I'm creating an website and I am really new in this area.
So, while i was coding, i had a question:
How do I hide an element after an animation goes out?
Per example:
This is my body:
<div id="loader">
<div id="box"></div>
<div id="hill"></div>
</div>
and the css is pretty big, and i uploaded in pastebin because i think there is better to read.
https://pastebin.com/UU38K4Wf
What i want to do is show the text, images, and etc AFTER the animation dissapear.
How do i do that?
Sorry for the bad english, still learning...
You can use visibility: hidden; in your css.
visibility: hidden; good option.Any way first You add an attribute in your div tag display:none and take div id name,after find where the loader call happen and use div id name like
It's for show the hidden div idname.attribute.add("display:"); or idname.show(); and
this one for hide div idname.attribute.add("display:none"); or idname.hide();
I think it will work.
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.
Alright, so I'm a little puzzled about this: as you can see on the site for the Polymer Project, they have tabs that are horizontally scrollable if there are too many. I'd like to replicate this effect, but I can't figure out how to both prevent the <div> elements for tabs from wrapping as well as scrolling. Obviously, JS will need to be used here. Unless it's possible to get a custom scrollbar?
How can I do the above? A non-jQuery solution would be very much preferable.
Should be able to use plain JavaScript or jQuery to compare the calculated width of the inner div to the set width of the outer div. If #inner is wider than #outer, add a class to one of the divs to change how they're displayed. If not, remove the class.
The markup:
<div id="outer">
<div id="inner">
<div class="scroll-button"></div>
<!-- your tabs here -->
<div class="scroll-button"></div>
</div>
</div>
The styling:
#outer{
width:500px;
overflow-x:hidden;
}
#outer .scroll-buttons{
display:none;
}
#outer.has-scroll-buttons .scroll-button{
display:block;
}
Give the divs a fixed height and dynamic length. Where the length property of the div is made by counting the number of columns you want in a div.
Why the aversion to jquery?
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.
what would be the easiest method to display only specific elements on a website?
For example, on a news site only the headlines and nothing else.
I'd like to select elements via CSS so only those should be displayed.
I tried to use the :not pseudoclass:
:not(.myClass) { display: none; }
But obviously, the parents of the .myClass-elements aren't displayed and so aren't them.
Do you know any possibility to achieve this? It doesn't have to be CSS-only, Javascript is possible too.
A web-app that does this would also be great.
I'd like to be able to filter some sites I visit, so I would apply this as a user-stylesheet.
You can load the page with jQuery and easily select the elements you want...
$("body").load("path/to/page.html div.headline");
The above will load all <div class="headline"> elements into the body of the document.
Note: You will of course have to keep the same origin policy in mind.
If you want to show only the news headline you will need to structure your HTML correctly. If you have a container div the easiest way to do this would be to apply a secondary class to it and show/hide elements trough that class:
<div class="container news_page">
<h1>Title</h1>
<p>Random text I want to hide.<p>
<div class="random_container">Another random element i want to hide.</div>
</div>
.container {border:1px solid red;} /* .container has normal styling */
.news_page p, .news_page .random_container {display:none;} /* .news_page is used only to select elements inside container on news page */
This would be the css only solution to this.
I can't figure out how to comment on things, so as a response to the last answer's last comment, check this out: http://selectivizr.com/. It says it can emulate CSS3 selectors for IE, so maybe that will fix your problems with Exploder...