So I'm currently trying to figure out how to use the .show() and .hide() functionality provided by jQuery to show and hide a div-class or a p-class containing some text, and I want to be able to click inside the div-parent to be able to show the context. Not to have a button but let's say i hover over a div-class containing a short text and a logo the background changes, and I want to be able to click on this class and show the hidden content inside parent-class.
I'll try to ilustrate this with the pictures below:
So after I click in the div-class this should extend the existing class and show the hidden content:
I hope someone can get me on the right track here and help me solve this.
Cheers
You could solve your concern in pure CSS on hover. Check if this is what you're looking for!
.content:hover, .content2:hover, .content3:hover {
height: 200px;
}
or you can use jQuery!
Note: This code is to retain the transition when the div expands with a dynamic height.
Updated
jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height;
return this.each(function(i, el){
el = jQuery(el), elem = el.clone().css({"height":"auto"}).appendTo("body");
height = elem.css("height"),
elem.remove();
if(prop === "height")
el.animate({"height":height}, speed, callback);
});
}
$("document").ready(function(){
$(".content, .content2, .content3").hover(function(){
var h = $(this).css("height");
if(h == '50px'){
$(this).animateAuto('height', 20);
}
else{
$(this).css("height", '50px');
}
});
});
.content, .content2, .content3 {
padding: 5px;
height: 50px;
width: 25%;
margin:0 2%;
float: left;
position: relative;
transition: height 0.5s;
-webkit-transition: height 0.5s;
text-align: center;
overflow: hidden;
background:#666;
border-radius:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<h2>Div 1</h2>
<p>This is an example! This is an example!</p>
</div>
<div class="content2">
<h2>Div 2</h2>
<p>This is an example! This is an example! This is an example! This is an example! This is an example2!</p>
</div>
<div class="content3">
<h2>Div 3</h2>
<p>This is an example! This is an example!</p>
</div>
Rather simple to acchieve by using event handlers like hover or mouseenter.
$("div").hover(function(event){
$(this).show();
/*OR*/
$(".selector").show();
});
You can find all the events here:
http://api.jquery.com/category/events/
... and all the mouse events here:
http://api.jquery.com/category/events/mouse-events/
Please do refer another way of approach using pure css
<div class="box-content">
<h2>Div 1</h2>
<p>This is an example! This is an example! This is an example! This is an example! This is an example! This is an example! </p>
</div>
<div class="box-content">
<h2>Div 2</h2>
<p>This is an example! This is an example! This is an example! This is an example! This is an example! This is an example! </p>
</div>
<div class="box-content">
<h2>Div 3</h2>
<p>This is an example! This is an example! This is an example! This is an example! This is an example! This is an example! </p>
</div>
.box-content { padding: 5px; height: auto; width: 25%; margin: 0 2%; float: left; background: #666; border-radius: 5px; }
.box-content p { display: none; }
.box-content:hover p { display: block; color: #fff; }
When the main container element is clicked find all of the children of the clicked element with the hidden-text class and show them.
$(".hidden-text").hide();
$(".container").click(function() {
$(".container").children(".hidden-text").hide();
$(this).children(".hidden-text").show();
})
.container{
width:100px;
display:inline-block;
vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">This is a div<div class="hidden-text">This is a bunch of hidden text in the div inside of another div.</div></div>
<div class="container">This is a div<div class="hidden-text">This is a bunch of hidden text in the div inside of another div.</div></div>
<div class="container">This is a div<div class="hidden-text">This is a bunch of hidden text in the div inside of another div.</div></div>
Related
I have inherited somebody else's problem. The HTML is all DIVs with floats, displays and positioning tweaks. The one thing I cannot change is the structured of the HTML DIVs. Nor do I wish to add any new javascript libraries. But I can add all the CSS I need to the existing DIVs.
Currently 3 DIVs are embedded as:
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
<DIV> 2 </DIV>
<DIV> 3 </DIV>
</DIV>
Take a look at the graphic below. The problem with this is that as DIV1 grows down, the DIV3 gets bumped down. I wish to keep DIV3 fully justified from the top to bottom (as if STRETCH).
Without getting into how the current code combines DISPLAYS, FLOATS, and POSITIONING -- I think I need to erase all the CSS and replace with some FLEXBOX. But I cannot seem to get the right combination of FLEX properties to make DIV3 behave to stretch (instead of getting bumped down).
Fortunately, this only has to work for Chrome on Desktop (no mobile nor other browsers).
There you go IF width of div 3 is known and fixed value:
https://codepen.io/AugustinF/pen/qYBpmR
.wrapper {
position: relative;
border: 2px solid black;
}
#firstrow {
height: 100px;
margin-right: 200px;
background: green;
}
#secondrow {
}
#div2 {
float:left;
background: blue;
}
#div3 {
width: 200px;
position: absolute;
top:0;
right:0;
height: 100%;
background: red;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
HTML:
<div class="wrapper clearfix">
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow clearfix">
<DIV id="div2"> 2 </DIV>
<DIV id="div3"> 3 </DIV>
</DIV>
</div>
Using #Pete solution you can modify the HTML structure using javascript by placing this code at the end of the body tag:
<script>
document.getElementById('firstrow').appendChild(
document.getElementById('div2')
);
</script>
So my question is how do I make a div push down everything that comes after it, even if the elements that come after have a fixed positions.
Let me explain the scenario:
I have the following structure:
<body>
<div class="top_menu">
</div>
<div class="content">
</div>
</body>
Where .top_menu has a position:fixed; and top:0;
Now using JavaScript I insert a new div right after <body> and wrap the rest in another div to end up with something that looks like this.
<body>
<div id="notice_bar">
</div>
<div id="wrap">
<div class="top_menu">
</div>
<div class="content">
</div>
</div>
</body>
Now is there a way to make the #notice_bar div always push down the #wrap div with all its content?
Changing the position:fixed; attribute of .top_menu is not an option because this script I’m working on should work on any given website.
I’m really running out of ideas here so any tips will be greatly appreciated. Thanks!
EDIT: Here is the specific scenario were I'm working on right now in case anyone feels generous enough to play arroudn with it :) http://mirlostudio.com/choeducators
If you want the notice bar to remain at the top, while the menu scrolls with the page you could use a little jQuery/javascript to toggle a class that adds fixed positioning to the menu:
Working Example
$(window).scroll(function() {
$('.top_menu').toggleClass('scrolling', $(window).scrollTop() > $('#wrap').offset().top);
});
.top_menu {
height: 20px;
width: 100%;
background: blue;
}
.content {
position: relative;
height: 600px;
background: grey;
}
.scrolling {
position: fixed;
top: 0px;
right: 8px;
left: 8px;
width: auto;
z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notice_bar">Notice Bar</div>
<div id="wrap">
<div class="top_menu">Top Menu</div>
<div class="content">Content</div>
</div>
If you set the .wrap container to position: relative; - all elements inside the .wrap container that are absolutely positioned will be moved together with their parent container.
So I have a dropdown thingy. You click on the 'Click Me' text and it'll show. Here's a demo to it http://jsfiddle.net/QzLst/
Now here's the issue. The blue text on the right, shows even when I placed it in the div that slides up and down. I'm not really sure where to go from here. Here's my markup
<div class="search">
<div class="text">
Some text
</div>
</div>
<div class="click">Click me</div>
And the CSS
.search{
width: 100%;
background: #000;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
z-index: 200;
height:0;
transition: 0.5s;
}
.toggle{
height:100px;
}
.text{
color: #009dff;
float: right;
}
The demo will help you understand what I mean. All I want is the text to slide with the div named search. So when search closes, basically I guess text would also close
Add overflow: hidden to .search.
This solves that problem:
[update to your fiddle] [http://jsfiddle.net/QzLst/1/]1
We can simply hide the .text class with this CSS:
.text {
display: none;
}
Then we toggle the .text class:
$(".click").click(function(){
$(".search").toggleClass("toggle");
$(".text").toggle()
});
I have a very odd situation, I have looked all over and cannot find someone with a similar situation, and in my eyes, I don't see why this inst working. I'm trying to make a simple tab list with jQuery:
I have a JS function as follows:
function changeWindow(contentId) {
$(".tabs").css("border-bottom","thin solid black");
$("#" + contentId + "Tab").css("border-bottom","thick solid white");
$(".content").hide();
$("#" + contentId).show();
$("#" + contentId + "Head").show(); //when I comment this line, all works well.
}
My html is:
<div id="header">
<div id="tabs">
<span onClick="changeWindow('browse')" id="browseTab" class="tabs"> Browse </span>
<span onClick="changeWindow('collection')" id="collectionTab" class="tabs"> My Collection </span>
<span onClick="changeWindow('play')" id="playTab" class="tabs"> Play! </span>
</div>
<div id="contentHeads">
<div id="browseHead" class="content">
some Html
</div>
<div id="collectionHead" class="content">
some Html
</div>
<div id="playHead" class="content">
some Html
</div>
</div>
</div>
<div id="gameField">
<div id="browse" class="content">
some Html
</div>
<div id="collection" class="content">
some Html
</div>
<div id="play" class="content">
some Html
</div>
</div>
I dont think it matters much, but here is my CSS(I left some out):
#tabs
{
position: absolute;
top: 10px;
left: 10px;
border-bottom: medium solid black;
}
.tabs
{
border: thin solid black;
padding-left: 50px;
padding-right: 50px;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
.content
{
position: relative;
height: 100%;
overflow: hidden;
}
The curious thing is, this function will run once(i.e i can click a tab) and everything works perfect. But after i click a tab, the CSS property cursor: pointer; no longer did anything, and the JS function no longer works. I have tested and other functions still run when called, just not this one. After a bit of testing, I came to the conclusion that it is because of the last line in the JS function. When I comment it all works well(except that the Heads don't show). I dont understand what is going on, i think it is an HTML problom, but have no clue. Does anyone know why this may be happening?
Thanks in advance.
The problem is that your "content" blocks come after the menu in the document, so when they're visible they cover the menu up.
Here is a fixed jsfiddle to demonstrate.
I updated the CSS:
.content {
position: relative;
height: 100%;
overflow: hidden;
margin-top: 40px;
display: none;
}
I also added CSS to move the "gameField" stuff out of the way.
It can be tricky to diagnose problems like this, but the developer tools ("inspector") generally make it a lot easier.
I am trying to float columns using CSS so they stack up evenly like on this blog: http://typeneu.com
It seems to be impossible using CSS so I am looking into JavaScript.
The website listed above uses this JavaScript file: http://typeneu.com/wp-content/themes/grid-a-licious/scripts/grid-a-licious.js
I have tried to implement it to experiment but it doesn't seem to be working.
Any links to tutorials on this subject or suggestions for getting it to work with JavaScript or CSS?
Edit: I would like the number of columns to be flexible with the screen resolution.
I have a site which basically has DIV's float left with a set pixel width. Depending on the resolution and window size I might have 1-n columns, You should be able to basically:
<style>
.myClass
{
float:left;
width:350px;
}
</style>
<div class="myClass>my content</div>
<div class="myClass>more content</div>
<div class="myClass>even more content</div>
To get a fixed number of columns I'd assume you can calculate the width using javascript or perhaps there is some other trick.
Edit
Ok looking at their JS file you need to make sure you match up your class and id's to match what they are expecting Looks like all your posts need to be ina div with an id of allposts.
Check out the HTML of the site you typenu site you referenced and get your html to match theirs.
Keep it simple. This should make a nice page... the css should include this:
.header,.bod,.footer { width: 700px; margin: 0 auto; }
.header { border-bottom: 3px solid #CCC; margin-bottom: 1.0em; }
.footer { border-top: 3px solid #CCC; padding-top: 1.0em; }
.first, .second, .third, .fourth { position: absolute; top: 0; left: 0;}
.first { width: 100px; left:10px;}
.second { width: 100px; left:110px;}
.third { width: 100px; left:220px;}
.fourth { width: 100px; left:330px;}
.clear,.tall { position: relative; } /*\*/* html .clear{ display: inline;}
.tall:after { content: ''; } /*fix of safari bug?*/
and some html (inside the body, after you have called the css):
<body>
<div class="header">TITLE</div>
<div class="bod clear">
<div class="first tall"> Lorem ipsum </div>
<div class="second"> Lorem ipsum </div>
<div class="third"> Lorem ipsum </div>
<div class="fourth"> Lorem ipsum </div>
</div>
<div class="footer" >FOOTER</div>
</body>
</html>
Simple, works, right?
After placing first component on the page, take dimensions of that, then place next components one by one on the UI using absolute placing.
That JavaScript file is actually part of this plugin:
http://suprb.com/apps/gridalicious/
It's not that hard to do in CSS, however. You just need to use floats.
For example:
<div style="float:left">Hello</div>
<div style="float:left">I'm also saying hello</div>
<div style="clear:both;"></div>
<div style="float:left">Hi again</div>
<div style="float:left">From the second line, that too!</div>
<div style="clear:both;"></div>
Is it clear enough?