To give a basic idea of what I hope to accomplish;
I currently have a site live at:
http://shiinachi.com
As it is, the body element is changed using javascript when clicking between the home and email tab.
However, I hope to redo this. I aim to have the width of the body expand when a button is clicked, so the body "drops down" to show the menu in question.
I have experimented using an onload function to trigger a css class;
function bodyloaderS() { classList.add("body-loader")
The css of the body is set to a width of 0 by default, then I attempted to use the body-loader class in question to adjust the width.
body-section.body-loader{ width: 745px; }
I then called the transition onload to test it. However...
The results were less than successful.
Is there a better way I can go about doing this?
Edit:
Here's a dump of the code being used
Body tag;
<div id="body-section" onload="bodyloaderS(document.body-section)">
<h1>Home</h1>
<p>Hello.<br><br>Temp</p> </div>
Relevant CSS;
#body-section{
position: relative;
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
height: 350px;
width: 0px;
transition: width 2s;
border-color: #ffffff;
border-style: solid;
border-width: 1px 1px 3px 3px;
border-radius: 3px 9px 3px 0px;
top: -752px;
left: 325px;
background-color: #222222;
}
#body-section.body-loader{
width: 745px;
}
The script in use;
<script>
function bodyloaderS() { classList.add("body-loader")
}
</script>
If you also add a target element in your function it will work, e.g.
function bodyloaderS() {
document.querySelector('#body-section').classList.add("body-loader");
}
Also, you might want to consider start using event listeners instead
var thebody = document.querySelector('#body-section');
thebody.addEventListener('load', function() {
this.classList.add("body-loader");
})
Updated based on a comment and a question edit
The onload event doesn't work on div elements.
Here is a suggestion using a DOMContentLoaded listener
document.addEventListener("DOMContentLoaded", function() {
var thebody = document.querySelector('#body-section');
thebody.classList.add("body-loader");
});
#body-section {
position: relative;
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
height: 350px;
width: 0px;
transition: width 2s;
border-color: #ffffff;
border-style: solid;
border-width: 1px 1px 3px 3px;
border-radius: 3px 9px 3px 0px;
/*
top: -752px;
left: 325px;
background-color: #222222;
*/
}
#body-section.body-loader {
width: 745px;
}
<div id="body-section">
<h1>Home</h1>
<p>Hello.<br><br>Temp</p>
</div>
Related
I am having issues placing my dT(Date/Time) div at the bottom of it's containing div. I have tried setting bottom: 0px; to no avail. Below is the html and css code I am using.
HTML:
<div class='container'>
<aside>
<img id="user-pic" src="images/blank-user.jpg">
#User_Name
<div id="trend"><h6>TRENDING</h6></div>
</aside>
<section class="main">
</section>
</div>
CSS:
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
}
.container{
margin-top: 80px;
}
section{
margin: auto;
width: 400px;
clear: left;
top: 100px;
}
.tweet{
width: 450px;
height: 225px;
background-color: #FFFFFF;
border: 4px solid #F1433F;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 15px;
padding: 25px 15px 0px 15px;
}
.tweetContent{
width: inherit;
height: inherit;
margin: 5px 5px 0 5px;
border-bottom: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
There is some JQuery elements within my code that I have not poseted because I do not believe it would have any effect on the positioning of a div.
It appears that the jquery aspect of the code might have something to do with it so here it is.
UPDATE: removed JQuery because it was not relevant.
Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.
Update:
And to the child elements for which you want to change position using left add position:absolute
P.S : Need to add relative for the div that contains #dT and absolute for #dT
#parentofdT
{
position:relative;
}
#dT
{
position:absolute
}
Easily pixed with position:absolute;: https://jsfiddle.net/1Lsnjou9/
Good luck.
You should add position: relative or position: absolute property to make the bottom: 0px work
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
position: relative;
}
use position property like position absolute or position relative so as to work with top, left,right,bottom properties
Can some please, PLEASE! help me with this problem. Okay so I have a code that at first I thought worked well but I forgot that when the default <img src="test-img-1.jpg" class="actual-img"> content is loaded the first of the three buttons below the image should take the active css state that I've specified for the active buttons to take. Now what I want is for this little code to behave like a normal slider by loading in the css hidden contents into the ".image-area" div and it works when I click on the buttons. Problems only surface when I am I trying to give the first loaded content an active state. One way I believe can fix this (I can't implement it) is to let the first immediate default content be this inline hidden div: (
<div id="image-area2">
<div class="img-area-wrapper">
<img src="test-img-2.jpg" class="actual-img">
</div>
</div>) while somehow letting the first button be set to active. I should also mention that I'm not the best with jquery. Please help me fix this someone!
Here is a fiddle to get a better understanding: http://jsfiddle.net/pyrot/84sU4/
If my way of going about this is totally absurd please let me know.
this is my code:
<script type="text/javascript">
$(document).ready(function() {
//loads default content
//$('#image-area').load($('.menu_top a:first-child').attr('href'));
$('.o-links').click(function() {
// href has to be the id of the hidden content element
var href = $(this).attr('href');
$('#image-area').fadeOut(1000, function() {
$(this).html($('#' + href).html()).fadeIn(1000);
});
return false;
});
});
$(function() {
$('.o-links').click(function(e) {
//e.preventDefault();
$('.o-links').not(this).removeClass('O_Nav_Current');
$(this).addClass('O_Nav_Current');
});
});
</script>
this is my html:
<section id="image-slider-container">
<div class="image-slider-inner">
<div id="image-area">
<div class="img-area-wrapper">
<!--currently this is the default I want to change-->
<img src="test-img-1.jpg" class="actual-img">
</div>
</div>
<div id="image-area2">
<div class="img-area-wrapper">
<!--I would like this to be the default content that when
seen the first button is set to active-->
<img src="test-img-2.jpg" class="actual-img">
</div>
</div>
<div id="image-area3">
<div class="img-area-wrapper">
<img src="test-img-3.jpg" class="actual-img">
</div>
</div>
<div class="slider-buttons">
<div class="slider-buttons-container">
</div>
</div>
</div>
</section>
and this is my css:
#image-slider-container {
width: 100%;
height: auto;
background-color: #ffffff;
padding: 5% 0px 0% 0px;
}
.image-slider-inner {
width: 100%;
height: auto;
max-width: 1040px;
margin: 0px auto;
padding: 0px 20px 0px 20px;
}
#image-area2,
#image-area3 {
width: 100%;
height: auto;
display: none;
}
#image-area {
width: 100%;
height: auto;
}
#image-area .img-area-wrapper {
width: 80%;
height: auto;
max-width: 1140px;
margin: 0px auto;
}
.actual-img {
width: 100%;
height: 100%;
}
.slider-buttons {
width: 100%;
height: auto;
max-width: 1140px;
margin-top: 0px;
}
.slider-buttons-container {
width: 100%;
height: auto;
max-width: 1140px;
margin: 10px auto 0px auto;
text-align: center;
}
.slider-buttons-container a {
border-radius: 360px;
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
background-color: #efefef;
outline: 0px;
text-decoration: none;
font-size: 12px;
box-shadow: -2px 1px 2px 0px #ADADAD;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.slider-buttons-container a:hover {
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
background-color: #DAD8D8
}
.slider-buttons-container a:active {
position: relative;
top: 2px;
}
.O_Nav_Current {
border: 1px #999999 solid !important;
background-color: #DAD8D8 !important;
}
Problems only surface when I am I trying to give the first loaded content an active state
Does this mean that you want to add a class to the first button?
$('.o-links').click(function(e) {
// ...
}).first().addClass('O_Nav_Current');
instead of using IDs for the slider's items and resetting html contents you can use classes and indexes:
CSS:
.image-area {
width: 100%;
height: auto;
display: none;
}
.image-area:first-of-type {
display: block;
}
JavaScript:
var $slides = $('.image-area'),
$btns = $('a.o-links');
$btns.on('click', function (e) {
var i = $btns.removeClass('O_Nav_Current').index(this);
$(this).addClass('O_Nav_Current');
$slides.filter(':visible').fadeOut(1000, function () {
$slides.eq(i).fadeIn(1000);
});
e.preventDefault();
}).first().addClass('O_Nav_Current');
http://jsfiddle.net/RmF57/
I have an icon, and when you hover over it, I would like to have a custom CSS tooltip appear to the right of the icon. Whether or not you scroll up or down the page, the tooltip will always need to appear to the right of the icon.
And no, I don't want to use any plugins. I just want a little JS/CSS to get the job done. If you use JQuery, it needs to be compatible with v1.7, and JQuery-UI: v1.8.
In addition, it needs to be compatible with IE 6 and 7.
I would prefer to leave my elements as siblings, but it looks like under certain circumstances the div that appears needs to be a child element, so it's OK if the HTML needs to be changed.
HTML:
<img src="" class="icon">ICON<img/>
<div class="demo">
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
</div>
CSS:
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
}
.demo:after, .demo:before {
border: solid transparent;
content: ' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
Live Example: http://jsfiddle.net/49Js3/16/
Since my reputation isn't high enough to comment on the answer above, I just wanted to add an updated fiddle (based on the above answer) that positions the tooltip absolutely, but with display: inline-block so that it is not fixed to certain position from the left and will show to the right:
here is the important bit:
a.tippy:hover + div {
display: inline-block;
position: absolute;
}
http://jsfiddle.net/7gmv3wo2/
Fiddle here: http://jsfiddle.net/49Js3/29/
I don't have access to IE6, so I don't know whether it's legal. I do know you'll need an anchor to get hover behavior with CSS in IE7 and earlier.
So, I added an anchor around your image, as well as a div to contain the tooltip.
HTML
<div class="outer">
<a class="tippy" href="">
<img src="" class="icon">ICON<img/>
</a>
<div class="demo">STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>
</div>
</div>
And here is the CSS:
.tippy {
text-decoration: none;
}
.outer {
width: 350px;
}
a.tippy:hover + div {
display:block;
float: right;
}
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
display: none;
}
.demo:after, .demo:before {
border: solid transparent;
content:' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
I'm showing and hidding a div using its visibility in css. It works fine in every other browse except IE8 & 9 and I can quite figure out why. From looking at this, can anyone possibly give an answer?
HTML
<div id="action-panel">
Show mne
</div>
CSS
#action-panel {
position : fixed;
height: 80%;
width: 300px;
background-color: #EEEEEE;
right: 10px;
visibility:hidden;
display: block;
top: 10%;
overflow:scroll;
padding: 10px;
z-index: 1000;
border-color: #000;
border-width: 1px;
border-style: groove;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
And the javascript
$('#action-panel').css('visibility', 'visible');
Seems like it should work unless I am missing something back
help please to fix my problem. i am newby in jquery ui. And have tried to create jquery slider:
http://jsfiddle.net/InviS/LYE8B/4/
But it outstep my in right position (see example). how can i limit the slider?
Here you go: http://jsfiddle.net/NAC7b/10/.
It's a bit hacky, but I wrap the slider within a parent <div>, and give the slider a max-width of 93%. Here's my changed CSS:
#wrapper{
width: 100%;
height: 20px;
background-color: orange;
border-top: 1px solid black;
position: absolute;
left: 0;
top: 129px;
}
#scroll{
width: 93%;
height: 20px;
background-color: orange;
border-top: 1px solid black;
position: relative;
left: -1px;
top: -1px;
}
And JavaScript:
$('#scroll').slider({animate: true}).bind('slidestop',function(e,ui){
//alert(ui.value);
}).wrap('<div id="wrapper" />');