CSS code:
div.albumTitleBackground {
position:absolute;
z-index:1;
background-color:whitesmoke;
/*top:2.5%;
left:2.5%;
right:2.5%;
bottom:2.5%;*/
top:0;
left:0;
bottom:0;
right:0;
opacity:0;
transition:all 0.25s ease-in-out;
}
div.albumTitleText {
display:inline-block;
font-family:'Times New Roman';
font-size:6em;
position:absolute;
z-index:2;
color:darkgray;
top:50%;
left:5%;
}`
HTML code:
<div class="albumTitleBackground"></div>
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
Problem: the idea is that background of the 'albumTitleBackground' div should be animated when user enters inside the element and must remain the same when user hovers the 'albumTitleText' div. Which way is the easiest one (and cross-browser as like) to achive that?
There are three ways to do this:
Two involve changing your HTML
1) As #melwynpawar says, you need to wrap your title div inside your background div.
<div class="albumTitleBackground">
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
</div>
And use CSS:
.albumTitleBackground:hover {
/* Animations Here */
}
2) You could wrap it all in a container div. Like so:
<div class="container">
<div class="albumTitleBackground"></div>
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
</div>
And CSS:
.container:hover .albumTitleBackground {
/* Animations Here */
}
And then without changing your HTML
3) Two CSS rules
<div class="albumTitleBackground"></div>
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
And CSS:
.albumTitleBackground:hover {
/* Animations Here */
}
.albumTitleText:hover .albumTitleBackground {
/* Animations Here */
}
This last one is not recommend because you will have to consistently check that the two rules are the same. Note that the animation will probably restart when you move from one div to the other.
Change your HTML structure to
<div class="albumTitleBackground">
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
</div>
You need to wrap the title text inside the Title background div
Related
I have a parent div and 2 child divs (child-left and child-right). child-right div will contain 1 or 2 icons depending on dynamic page requirement. The child-left div contains the title and also used as a handle to drag operation. I do not want to set a width px or % (like the 90% I have below). How do I set the child-left div to take the rest of available space after what is occupied by child-right.
<div id="parent">
<div id="child-left" style="width:90%">
This is my title
</div>
<div id="child-right">
<i class="fa fa-cog"></i>
</div>
</div>
Thanks!
The following should help you:
HTML:
<div id="parent">
<div id="child-right">Hey</div>
<div id="child-left">This is my title</div>
</div>
CSS:
#child-left {
border: 3px solid gray;
background-color:blue;
margin-left:0px;
overflow:hidden;
}
#child-right {
float:right;
border-style:solid;
}
#parent {
overflow:hidden;
}
DEMO JSFiddle
I am creating a single page website with a fixed navigation. There are 4 different sections. When the user clicks the link in the navigation, I would like to fade the color of the navigation to match the theme of the section it takes them to. What would be the best way to go about doing this? I've tried many different things, but nothing seems to achieve the look I am going for. -Thanks in advance!
So you will need a couple of things to accomplish this.
Nav layer sitting above other layers
stacked background layers for each section with static background colors
knowledge of current color and new section color
And what you will do with that is to have each section keep track of its color. When the nav for that section is selected, the current layer behind the nav begins to fade out. At the same time, the layer of the new section begins to fade in. This will give the impression of one color fading into another.
edit
jsFiddle Demo
Here is a very rudimentary example of doing this. There should probably be more structure, better styling, and perhaps more management of state in code. However, clicking the links will demonstrate the color fading.
js
$("#redSection,#redPane").show();
$("#navLinks div").click(function(){
$(".pane:visible,.section:visible").fadeOut("slow");
var color = this.getAttribute("data-color");
$("#"+color+"Section,#"+color+"Pane").stop().fadeIn("slow");
});
html
<div id="layers">
<div id="navLinks">
<div data-color="red">about</div>
<div data-color="green">contact</div>
<div data-color="blue">overview</div>
<div data-color="orange">links</div>
</div>
<div id="redPane" class="pane"></div>
<div id="greenPane" class="pane"></div>
<div id="bluePane" class="pane"></div>
<div id="orangePane" class="pane"></div>
</div>
<hr />
<div id="contentArea">
<div id="redSection" class="section">about</div>
<div id="greenSection" class="section">contact</div>
<div id="blueSection" class="section">overview</div>
<div id="orangeSection" class="section">links</div>
</div>
css
#layers{
position:relative;
}
#navLinks div{
font-weight:bold;
font-size:110%;
text-decoration:underline;
cursor:pointer;
position:relative;
z-index:1;
}
.section{
display:none;
height:100px;
width:100px;
position:absolute;
}
#redSection{
background-color:red;
}
#greenSection{
background-color:green;
}
#blueSection{
background-color:blue;
}
#orangeSection{
background-color:orange;
}
.pane{
position:absolute;
right:0;
left:0;
top:0;
bottom:0;
display:none;
}
#redPane{
background-color:red;
}
#greenPane{
background-color:green;
}
#bluePane{
background-color:blue;
}
#orangePane{
background-color:orange;
}
#contentArea{
position:relative;
}
Can you please tell me how to rotate div and set the color of div .By default red is in top so it print red.But when user rotate clockwise or anticlock wise it print the name of color on top . I think I have to mouse over and mouse out event can you please help me making a demo . http://jsfiddle.net/cdZ73/1/
<label style="display:inline-block">color Name:</label>
<label>red</label>
<div id="full">
<div class="red"></div>
<div class="pink"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
how to get touch start event so that they change position ? change label text ?
I'm not sure I understand what you mean by "rotate". Assuming that what you want is changing the color of the boxes, I made some changes in your HTML and CSS, and then made the classes of the boxes change when clicked.
HTML:
<label style="display:inline-block">color Name:</label>
<label class="colorName">red</label>
<div id="full">
<div id="top" class="red"></div>
<div id="left" class="pink"></div>
<div id="bottom" class="blue"></div>
<div id="right" class="green"></div>
</div>
CSS:
#full > div {
width:100px;
height:100px;
position: absolute;
}
#top { top:10px; left:200px; }
#left { top:120px; left:20px; }
#bottom { top:220px; left:200px; }
#right { top:120px; left:350px; }
.red { background:red; }
.pink { background:pink; }
.blue { background:blue; }
.green { background:green; }
JavaScript:
var arr = ["red","pink","blue","green"];
$('#full').on('click', 'div', function() {
$('.colorName').text($(this).attr('class'));
var sel = arr.indexOf($(this).attr('class'));
$(this).closest('#full').find('div')
.first().removeClass().addClass(arr[sel])
.next().removeClass().addClass(arr[(sel+1)%4])
.next().removeClass().addClass(arr[(sel+2)%4])
.next().removeClass().addClass(arr[(sel+3)%4]);
});
Here's the jsFiddle to test it.
A few things to notice:
I assigned an id for each square to be able to separate position and color in the CSS, so we can change the color of a square just by changing its class.
In the javascript, the colors in the array are in the same order than in the classes of the squares (counter-clockwise in this case).
When a square is clicked, we get the index of its color and use it to replace the class of each square with the new one.
If you uncomment the alerts in the fiddle, it will show you the html of the squares before and after the class changes.
I know the code could be cleaner or better in some ways, that was just a quick try.
Hope it helps!
I have had some problems to resolve this situation.
I have a div "header" with no set height because could have a variable value depending on browser.
Inside her I have two more divs and I want to place one div exacly at the bottom of the another but I never know height "header" height. I tried to define a height for div "header" but sometimes it fails.
Use position:absolute in combination with a positioning context on the parent, for example:
<header>
Ohai
<div>
Noes!
</div>
</header>
CSS:
header {
position:relative;
height:25%;
background:#eee;
}
div {
position:absolute;
bottom:0;
left:50%;
margin-left:-50px;
width:100px;
background:red;
}
The header's size is unknown, since it's based on the viewport height, and the div is locked to its bottom with the combination of position:absolute and bottom:0. The header needs the position:relative to designate it a positioning context used by absolutely positioned child elements.
Fiddle here.
One way to do this would be to set position:relative on the header div, and position:absolute and bottom:0 on the child div you want to sit on the bottom of the header.
jsFiddle example
just use clear:both for the second div at bottom ,and set the height of the header as height:auto
Sample:
<div id="header">
<div id="first">
first
</div>
<div id="second">
second
</div>
</div>
CSS:
#header{height:auto}
#first{}
#second{clear:both}
DEMO
<div id="header">
<h2>Some title..</h2>
<div class="right">
<p style="color: black;display: inline">
Some data.....
</p>
</div>
<div class="left">
<form action="#" >
<input type="text" placeholder="put here..." required="required">
<button type="submit">Validar</button>
</form>
</div>
</div>
CSS:
#header{position: relative;height: 150px; border:1px solid black}
.right{right: 0; bottom: 0; top:auto; position: absolute}
.left {left: 0; bottom: 0; top:auto; position: absolute}
This work just fine in Chrome and Firefox but is not working in IE.
The div which have the left css is not being placed at the bottom of the "header".
<div>
<div>
div1
</div>
<div>
div2
</div>
</div>
I'm trying to display two images side to side, with text, controls and whatever else my heart desires over them.
To do this, I have the following:
<div>
<div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent">
<div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is text</div>
<div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is also text</div>
<img id="leftImg" alt="Images/redbox.png"
style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;"
src="Images/redbox.png" />
</div>
<div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent">
<img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
</div>
</div>
This is all great except for one little thing... The left div, the "redbox.png" is always scooted down by the number of s I want inside it (or any place taken by the elements).
I could place the elements after the image, but it's really easier to place them where I want this way, and to keep them in place when I animate the boxes.
Now, why am I using images instead of background-img? Well I want the images to resize to the surrounding <div>s automatically, and this is the only way I found of doing it easily (resizing manually with javascript is an option, but a complicated one at that, since the boxes will be animated).
Any ideas? Thanks!
You should use position:absolute rather than position:relative in order to take the element out of flow. You will need to adjust the left and top attributes, however.
http://jsfiddle.net/3fJcR/1/
<div>
<div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
<div style="position:absolute; left:61px; top:50px; width: 319px; z-index:1">This is text</div>
<div style="position:absolute; left:61px; top:64px; width: 319px; z-index:1">This is also text</div>
<img id="leftImg" alt="Images/redbox.png"
style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;"
src="Images/redbox.png" />
</div>
<div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
<img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
</div>
</div>
You can have position:absolute for your wrapping div and position:absolute for inner overlay too. Then the inner absolute is relative to outer absolute positioned element not the body.
Look at this example to see what I'm saying:
http://jsfiddle.net/mohsen/TbkjK/7/
For writing text over image you put image in background style and alt text like this-
<img scr="" alt="text"/>
<style>
.img{background-image:url('IMAGE_URL'); }
</style>