Thanks to the generous help of someone at stackoverflow, I was able to put different colored CSS boxes over different images and remove the css boxes (revealing the images) whenever there was a mouseover. this is the code i used fiddle http://jsfiddle.net/alexdickson/fyYcC/
However, I also wanted the boxes to align horizontally in a float, so (being a beginner) I put another class (called float) around the images (in class rollover) but it deactivated the rollover.
Is there a better way to implement the float than I have done below?
Thanks for your help in advance
<div class="float">
<div class="rollover a">
<img src="http://blahblah.com/wp-content/uploads/2011/01/1.jpg" />
</div>
</div>
<div class="float">
<div class="rollover b">
<img src="http://blahblah.com/wp-content/uploads/2011/01/2.jpg" />
</div>
</div>
<div class="float">
<div class="rollover c">
<img src="http://blahblah.com/wp-content/uploads/2011/01/3.jpg" />
</div>
</div>
.float
{
float: left;
width: 200px;
border: 1px solid #fff;
margin: 0 15px 15px 0;
padding: 5px 10px 10px 10px;
}
You can add the float class directly to the class of the inner div.
Also, float generally isn't a very good class name. You should give it a semantically meaning name, and attach its presentation via the CSS. You are leaking CSS implementation details into the HTML.
jsFiddle.
I forked the jsfiddle you posted and was able to float them left with two rows of 3 images. You can just add more to each container for more horizontal images, and add more containers to add more rows. http://jsfiddle.net/robx/592ba/1/
Related
As you can see above, I cannot select the overflowed events on the calendar date. It looks like it's because I have the overflow:hidden/visible toggle triggering on the class of the calendar date: '#cell-shell'.
Here is the HTML code for that specific date:
<td>
<div id="09" class="cell-shell>
<div class="date-num">9</div>
<div class="event-wrap>
<span></span> <!--these hold edit buttons when editor is logged in-->
<span></span>
<div id="e1" class="cell-data">Event 1</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e2" class="cell-data">Event 2</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e3" class="cell-data">Event 3</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e4" class="cell-data">Event 4</div>
</div>
... <!-- pattern repeats-->
</div>
</td>
Here is my current relevant CSS:
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
}
.cell-shell:hover {
overflow:visible;
}
.event-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.event-wrap:hover {
opacity: .5;
}
Is there any way through CSS or JS that I can prioritize the '#cell-data' elements? I need to be able to click on those events 6 & 7 and beyond, but once my mouse wanders out of the '9' '.cell-shell' box into the '16' '.cell-shell' box, '16' seems to take over.
EDIT: I added more information as requested by david. I thought it was irrelevant but perhaps not. I added the elements as well as the children below them. I also added in the event-wrap CSS
It looks like it's not because you mouse over 16, but because your mouse went between the event divs, thereby touching the 16 div between the event divs.
See the frame below where you're over an event on top of 16 just before you cross the gap:
The way that hover works is that if the mouse is over any sub-element of the element with hover, that hover CSS will continue to be used. But the moment the mouse leaves the border-box of the sub-element AND is outside of the element with over, the hover CSS will stop working.
I bet that if you're fast and accurate enough, you can get the mouse to clip over the gap between frames and keep it open. But your users might not find that useful. ;P
One method that might fix this would be making sure that the event divs have no space between them. That means no margins separating them.
In order to keep your current visual without having to add too much code, you can do something like the following:
...
<div class="event-wrapper"><div id="e1" class="cell-data">Event 1</div></div>
<div class="event-wrapper"><div id="e2" class="cell-data">Event 2</div></div>
...
...where the event-wrapper class looks like:
.event-wrapper {
margin: 0px;
padding: 0px;
}
Another method might be having the whole date box expand its size, but that might require some changes to how the layout works in order to keep it from messing things up.
Anyway, I hope that helps.
Use z-index to give priority to your cell-data elements over '16'.
Find a sample demo of it's usage below:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Add CSS property z-index: -1 into your css.
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
z-index: -1 // Here
}
.cell-shell:hover {
overflow:visible;
z-index: -1 //Here
}
Hope it will work for you.
I'm working on Angular 2 now. In my template I'm using the following to show the data I get from the APIs
<div class="blocks">
<div router-active class="block" *ngFor="let item of items">
<div class="inblock">
<p class="title">{{ item.name }}:</p>
</div>
</div>
</div>
Everything is working fine but if one of the div height was higher than the others it would look something like the image below
I want to have a nice row with three divs only and after three you start a new block, I know how to do it normally but I can't figure out how to do it with Angular 2!
UPDATE : I don't want a fixed height because the content can be as long as the user wants! so adding a fixed height with CSS will not solve the issue
You will find a solution using css. Take this code:
.block {
float: left;
width: 150px;
margin: 10px;
border: 3px solid #73AD21;
}
.block:nth-child(3n+4){
border: 1px solid red;
clear: both;
}
The above code is using float to make the blocks inline. Using nth-child you can tell it to clear each 3rd block.
Why don't you create a 'css' associated to your template and pass it to styleUrls property. In that CSS you can defile a class and set the div properties whatever you like and pass that class name to the elements.
In this JSFiddle, I have a button with an image in the background. If you click the button, a collapsed column springs out from the bottom.
What I'm looking to do is have that same background image dynamically re-size to fit the entire un-collapsed div once it's un-collapsed. Now, I understand that I could do a call like
$(this).addClass('imageUpdate');
when I want dynamically change the CSS for the header/button div, but this isn't exactly what I'm looking to do; I want the image to resize but to also map itself across the entire expanded column (and the header that it drops down from).
Is there any way that I can get around doing this? Or, as I suspect, can I not have an image span across multiple divs? If this is the case, what alternative would you recommend in order to achieve my goal? Thanks!
HTML
<div class="col-md-3" id="left-accordion">
<!-- first set of buttons -->
<div class="panel panel-default">
<div class="panel-heading" role="button" data-toggle="collapse" data-target="#baselayer">CLICK ME<br/>
<span style="font-size:1.25em;color:#fff;" class="glyphicon"></span>
</div>
<div class="collapse" id="baselayer">
<div class="well selections base-buttons" id="softbutton" role="button">Bulbasaur<br/>
<div class="selected">
</div>
</div>
<div class="well selections base-buttons" id="medbutton" role="button">Charmander<br/>
<div class="selected">
</div>
</div>
<div class="well selections base-buttons" id="firmbutton" role="button">Squirtle<br/>
<div class="selected">
</div>
</div>
</div>
</div>
</div>
CSS
.panel-default > .panel-heading {
color: #fff;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/English_Pok%C3%A9mon_logo.svg/2000px-English_Pok%C3%A9mon_logo.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 110%;
border: none;
}
You do not need any JavaScript, but move the background to the conatining <div class="panel-default">. Then you remove the background of the elements above and you're good.
Example
CSS:
.panel-default > .panel-heading {
color: red;
background: transparent;
}
.panel-default .well{
background: transparent;
}
.panel-default {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/English_Pok%C3%A9mon_logo.svg/2000px-English_Pok%C3%A9mon_logo.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 110%;
border: none;
}
Once you're done, copy the image to your own server for production use, instead of referencing to the one on Wikimedia.
Or, as I suspect, can I not have an image span across multiple divs
You can have your image as large as you want.
You just have to tell it, how large it should be, by changing the style.width and style.height attributes. (or background-size in your case)
This is what i would do by JS.
But you want to do it automatically - so I would attach the background-Image to you bigger container .panel-default
But then, the buttons are in front of it, so you would have to change the background-color etc of them ...
This is my code jsfiddle. I have three text fields. headline1Txt, headline2Txt and headline3Txt. Right now it is working fine but if i change my headline1Txt to Vintage Lace Turquoise Dress. headline2Txt to SAle Price $135 and headline3Txt to Reg:$50 then my text allignment is overlapping each other and i want my text to appear like this
.
Can anyone tell me what i am doing wrong here?
<div id="mainContainer">
<div id="logo">
<img id="Img1" src="http://i.share.pho.to/cc9794da_o.png" width="50px" height="50px"/>
</div>
<div id="images">
<img id="introImg" src="http://i.share.pho.to/ebe3afc7_o.png"/>
</div>
<div id="headlineText">
<p id="headline1Txt" >Striped Bag</p><br />
<p id="headline2Txt" >$14</p><br />
<p id="headline3Txt" >Sale $25</p><br />
</div>
<div id="ctaBtn">
<button class="btn btn-primary" type="button">SHOP NOW</button>
</div>
</div>
Thanks
The css can certainly be cleaned up. I would try to avoid using absolute positioning as much as possible because it is not as easy to maintain or make changes. In your example increasing the text length of the headlines does not shift the other headlines down, because they are absolutely positioned to stay where they are.
I tried to leave as much of your code as intact as possible and I only made changes to the css:
http://jsfiddle.net/fAsNt/
The main thing I changed was the positioning of the headlines and added a width so they wouldn't overlap with the image:
#headline1Txt, #headline2Txt, #headline3Txt
{
position: relative;
margin: 0px 2px;
left: -150px;
width: 170px;
line-height: 1;
}
In each of your 3 headline text boxes, you specify "position: absolute;" but do not specify the "top:" property. Specify "top" where they should be and you'll be fixed right up.
Here's the js fiddle- note I added "top" at the end of your CSS:
http://jsfiddle.net/rttmY/7/
#headline1Txt { top: 0; }
#headline2Txt { top: 25px; }
#headline3Txt { top: 50px; }
Also, get rid of those <br />. Since you are positioning absolute, I would also recommend using <div> tags rather than <p> tags because you're technically not making paragraphs, you are positioning blocks. The result would actually be the same, but it's a best practice to use for absolutely positioned blocks.
I have an application in which I am kind of stuck.
i have created a widget which needs to be placed in such a way that it needs to auto place itself.
Eg:
I have something like this on a page, now initially all these are arranged perfectly(horizontally aligned), but as soon as the size of one of the component changes
Eg:
It becomes like this. What I want is it auto adjust itself to consume the empty spaces.
I played around with the css to make it float :left and display: block, by which I am able to align each component horizontally, but still I am not able to utilize the space on my page.
Any help is appreciated
a CSS only solution:
taken you want to have 3 "connection" items per row this should be your CSS:
#wrapper{
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
.itm{
display:inline-block;
width:100%;
border-top:1px solid red;
border-bottom:1px solid red;
margin-bottom:1em;
}
.itm:nth-child(3n+1){
clear:left;
}
and this your HTML
<div id="wrapper">
<div class="itm">
<h1>connections a</h1>
<div class="info">
<span class="label">server</span>
<span class="value">100</span>
</div>
</div>
[... copy paste as many "itm"s as you need]
</div>
See here a fiddle with "add more items on click" to see the result -- old -- http://jsfiddle.net/5FsLm/ -- old --
UPDATED fiddle http://jsfiddle.net/c2nkn/
This is definitely a perfect case for jQuery Masonry. The plugin can automatically arrange columns so they can fit together. Something like this:
html
<div id="wrapper">
<div id="list">
<div class="item"> ... </div>
<div class="item"> ... </div>
<div class="item"> ... </div>
<!-- ... -->
</div>
</div>
jquery
$(window).load(function(){
$('#list').masonry({
itemSelector: '.item'
});
});
P.S.: At the moment, the official website is down for some reason, I will put a temporary link here.
UPDATE: Temporary link for jQuery Masonry (actually from cutestpaw.com which has a local copy of it, so if you want to test it, you should copy the file instead of linking to it)
If you dont want much animations and need a script that very easy to understand and satisfies your purpose try jquery.popbild.js.
You can download the project from :http://funscripts.popbild.com/jquery_popbild/
Its mainly created to arrange element in the pinterest style for three columns(uses three divisions)
If I'm understanding you correctly, it looks like what you really want is a three column structure for these widgets. In which case it would look something like this.
HTML
<div class='three-column'>
<div class="widget">...</div>
<div class="widget">...</div>
<div class="widget">...</div>
</div>
<div class='three-column'>
...
</div>
<div class='three-column'>
...
</div>
CSS
.three-column {
width: 30%;
padding-right: 3%;
float: left;
}
UPDATED: http://jsfiddle.net/cBgj4