I am having problems with getting the z-index to change using javascript can any one help me on where I am going wrong,
what I am trying to do is have a box appear on top on another box once a button is clicked but it does not seem to work.
function toggleupload(){
var but = document.getElementById('picbutton').innerHTML;
if (but == "Change Picture"){
document.getElementById('picbutton').innerHTML = "Hide upload box";
document.getElementById('uploadbox').style.zIndex = 2;
document.getElementById('profilebasic').style.zIndex = 1;
}
if (but == "Hide upload box"){
document.getElementById('picbutton').innerHTML = "Change Picture";
document.getElementById('uploadbox').style.zIndex = 1;
document.getElementById('profilebasic').style.zIndex = 2;
}
}
#profilebasic{
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
}
#uploadbox {
position:absolute;
top:0px;
left:0px;
width:300px;
height:300px;
z-index:1;
background-color:#F00;
}
#uploadbo{
text-align:center;
width:300px;
height:300px;
z-index:3;
}
<div id="uploadbo">
<div id="profilebasic">
</div>
<div id="uploadbox">
</div>
<button onclick="toggleupload();" id="picbutton">Change Picture</button>
</div>
The z-index property only works on positioned elements, so you need to explicitly set the position on profilebasic like:
#profilebasic {
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
position:absolute;
}
jsFiddle example
(note that I also had to set some CSS on your button otherwise it would have ended up under your positioned divs.)
Since uploadbox already starts out in front I assume you want to swap these.
Based on z-index rules, an absolutely positioned div will still appear in front of a non-absolutely positioned div unless its z-index value is negative.
That is, use a negative z-index for the box you want to be behind.
http://jsfiddle.net/X54gr/
Related
I'm having an issue resetting a div's left position with jquery after an animation. I'm trying to animate a div from off the screen(left) to on the screen. However, I only want to trigger this animation if the value of scrollTop of the window is greater than a certain value. once the value of scrollTop is less than the value, I want the div's position to change so that it is offscreen again. This is working but only sometimes and I'm not sure why. I am also setting the position of the div to absolute at the same time I am setting it to go off the screen and this change always works!. Below is the code as well as the CSS of the div I'm trying to animate. Thank you!
Function to change position on scroll
$(window).scroll(function() {
if( $(this).scrollTop() > 500 {
$(".animated-logo").css({position:'fixed'});
$(".animated-logo").animate({left: '20px'},500);
}
else{
$('.animated-logo').css({position: 'absolute',left:'-150px'});
}
});
CSS for the animated-logo element
.animated-logo
{
position:absolute;
top:0;
left:-150px;
width:100px;
z-index:2;
}
So first off, you have a syntax error.
I would approach this with using classes instead of doing it like this. At best you're going to have a buggy transition. You can adjust the css transition to make it your desired timing.
JS:
$(window).scroll(function() {
if( $(this).scrollTop() > 500) {
$(".animated-logo").addClass('visible');
}
else{
$(".animated-logo").removeClass('visible');
}
});
CSS:
.animated-logo{
position:absolute;
top:0;
left:-150px;
width:100px;
z-index:2;
transition:0.5s;
}
.animated-logo.visible{
position:fixed;
left:20px;
}
https://jsfiddle.net/783z9rhm/6/
When you say This is working but only sometimes and I'm not sure why, it's not sure what the problem is so I'll assume you are having issues with the animation after the first time it runs. The is maybe because you are firing it ON EVERY USER SCROLL ACTION, which is a lot. Using a flag to fire it only once every time the 500px threshold is crossed will get rid of the glitch
HIH
var visible = false;
$(window).scroll(function() {
if( $(this).scrollTop() > 500) {
if(!visible){
visible = true;
$(".animated-logo").css({position:'fixed'});
$(".animated-logo").animate({left: '20px'},500);
}
}
else{
visible = false;
$('.animated-logo').css({position: 'absolute',left:'-150px'});
}
});
.animated-logo
{
position:absolute;
top:0;
left:-150px;
width:100px;
height:100px;
z-index:2;
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animated-logo"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
Goldman Sachs has a pretty cool webpage here. What interests me about the page is that when you scroll down, you get a header appearing, which - depending on the section where you're at - has more of its squares turn from white to blue. I was wondering (because I can't seem to find the answer in the code), how exactly they made the scrollbar appear seemingly out of the blue (pun not intended), but also how the squares turn from white to blue depending on where you are on the page.
the most common way to do this is by detecting the position of the scrollbar with javascript. I've used the JQuery library for this demo.
here's some code (merely for illustration purpose!)
$(window).scroll(function (event) {
var numOfButtons = 4;
var scroll = $(window).scrollTop();
var heightContainer = $(".container").height();
console.log('scrollPos', scroll);
if(scroll > heightContainer/ numOfButtons){
$(".header .button:nth-child(2)").addClass('act');
}else{
$(".header .button:nth-child(2)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*2){
$(".header .button:nth-child(3)").addClass('act');
}else{
$(".header .button:nth-child(3)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*3){
$(".header .button:nth-child(4)").addClass('act');
}else{
$(".header .button:nth-child(4)").removeClass('act');
}
});
.header{
height:50px;
background-color:blue;
color:white;
position:fixed;
top:0;
left:0;
width:100%
}
.button{
display:inline-block;
width:10px;
height:10px;
background-color:white;
border-radius:20px;
}
.button.act{
background-color:red;
}
h1{
margin-top:60px;
}
.container{
height:4000px;
background:url("http://www.planwallpaper.com/static/images/518164-backgrounds.jpg");
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Scroll demo</h1>
<div class="header">
<div class="button act"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
<div class="container"><div id="mydiv"></div>
</div>
</body>
</html>
enter link description here
you can easily achieve an effect like that using jquery waypoints: http://imakewebthings.com/waypoints/guides/getting-started/
the first thing that comes to my mind is adding a class with display:block to the header when a certain section hits the top of the viewport to make it visible and playing with addClass and removeClass with css transitions for the squares.
I'm working on a webpage that has a "Lower Lights" function but the code I have now has a few problems.
The first problem is that for some reason instead of the normal mouse pointer "arrow" it changes to the text select "I" when over the element and its confusing because the user doesn't know its clickable. I've tried changing the tags around it but nothing seems to help.
My second problem is I can't get the text to Dynamically change AND still function. I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but with the script I'm using now that seems impossible.
Here is the code that I'm using. Hopefully someone can point out what I'm doing wrong or point me in the right direction.
Notes: The goal of this was to be as simple and light weight HTML5 as possible. If there is an easier, less code, more light weight, option please let me know. Also I'm not opposed to using jQuery if it makes things more simple but I'm completely lost on that front.
If anymore information is needed please let me know.
<html>
<!-- This script handles the "Lower Lights-->
<script>
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$("#turnoff").click(function () {
$("#the_lights").css({'display' : 'block'});
$("#the_lights").fadeTo("slow",1);
});
$("#soft").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0.8);
});
$("#turnon").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0);
});
});
</script>
<style>
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
display:none;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
</style>
<div id ="standout">
<font color="white">
<div id = "turnoff">Lights: Low</div>
<div id = "soft">Lights: Medium</div>
<div id = "turnon">Lights: High</div>
</font>
</div>
<div id="the_lights"></div>
</html>
Is this what you want? Your divs are not links so you need to use the CSS cursor property. cursor:pointer so that it appears clickable. Start out with the first div visible and the other 2 hidden with the hidden CSS class created. I assigned the div id's as numbers. If you actually want divs to use to cycle with, then the code below should work.
example here JSFIDDLE
The jQuery
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$(document).on("click","div.lights",function () {
var divId = $(this).attr("id");
$(this).hide();
$("#" + divId).show();
$("#the_lights").css({'display' : 'block'});
if(divId == 1){
$("#2").show();
$("#1").hide();
$("#the_lights").fadeTo("slow",0.8);
}else if(divId == 2){
$("#2").hide();
$("#3").show();
$("#the_lights").fadeTo("slow",1);
}else if(divId == 3){
$("#3").hide();
$("#1").show();
$("#the_lights").fadeTo("slow",0);
}
});
});
The CSS
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
.lights{
cursor:pointer;
}
.hidden{
display:none;
}
The HTML
<div id ="standout">
<font color="white">
<div class='lights' id = "1">Lights: High</div>
<div class='lights hidden' id = "2">Lights: Medium</div>
<div class='lights hidden' id = "3">Lights: Low</div>
</font>
</div>
<div id="the_lights"></div>
The fiddle
http://jsfiddle.net/gE8VZ/
First for the UI you can change the mouse pointer using CSS cursor property: cursor:pointer; to let the user know it's clickable. Then you can also set an indicator to the current active lights by adding a class to change the styling.
You also don't need to set the display property everytime, "#the_lights" is a <div> element so it has a default block display. And trim down your code to something like this:
$(document).ready(function () {
var lights = $("#the_lights");
lights.fadeTo(1, 0);
$('#standout div').click(function(){
$(this).addClass('active').siblings().removeClass('active');
if($(this).is('#turnoff')){
lights.fadeTo("slow", 1);
}else if($(this).is('#soft')){
lights.fadeTo("slow", 0.8);
}else if($(this).is('#turnon')){
lights.fadeTo("slow", 0);
}
});
});
See this jsfiddle.
I'm not quite sure what you mean by: I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but I think a <select> element is a good way to do this. See this jsfiddle.
I want to make a reusable function that enable me to easily cover or overlap an element such as select, textfield, input, div, table and etc with a semitransparent div to it's exact height and width.
I am able to get the element position and size:
$(element).height()
$(element).width()
$(element).offset().top
$(element).offset().left
However, how can I bind the element position and size with the div? If the element position or size change, so as the div will change. Any suggestion that how I can do it? Or, is there any existing jquery plugin for this? I believe this will be very useful for temporary disable an element from user interaction for operation such as ajax and etc.
Thanks.
You could create a function/plugin using the jQuery .wrap() function and the appropriate CSS for the overlay..
$.fn.overlay = function() {
return this.each(function(){
var $this = $(this);
var left = $this.offset().left;
var top = $this.offset().top;
var width = $this.outerWidth();
var height = $this.outerHeight();
$this.wrap("<div id='overlay'> </div>")
.css('opacity', '0.2')
.css('z-index', '2')
.css('background','gray');
});
};
Demo on Bootply: http://bootply.com/87132
This should work generically and be reusable.. not just for Bootstrap elements!
Like this
demo
css
div {
position:relative;
z-index:1;
height:200px;
width:400px;
background-color:green;
}
div div {
position:absolute;
z-index:2;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:black;
opacity:0.5;
}
div div input {
position:relative;
top:25px;
z-index:1;
}
I can use javascript and everything else, but before reinventing the wheel, I would like to know if there is already a similar plugin for jquery because I would like to use that framework and not mootools.
I don't have problems with money, expecially for a 5€ template, but really I would like to use jquery because I studied it and not mootools.
The template: http://www.globbersthemes.com/demo/upsilum/
EDIT 1: I changed the title for future references for people that know the correct name of this type of effect, thanks to everyone.
i always liked the jquery tools tabs for this - see http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html
Here a plugin that might interest you : http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html
Here, I reinvented the wheel. But had looot of fun! :)
Tested in all modern browsers + IE 6-7-8
Instead of using 'title' images now you can use classic editable text!
Set desired 'start' tab
EDIT: added/fixed title support (rotaion for IE 6-7-8)
H - ACCORDION DEMO
The simple HTML:
<div id="acc">
<div class="title"><p class="button">Title 1</p></div>
<div class="cont">Cont 1</div>
<div class="title"><p class="button">Title 2</p></div>
<div class="cont">Cont 2</div>
<!-- more tabs here.... -->
</div>
The CSS style Ex:
.title{
cursor:pointer;
position:relative;
float:left;
width:20px;
height:200px;
background:#444;
color:#ccc;
padding:15px;
border-left:3px solid #aaa;
}
.cont{
position:relative;
float:left;
width:300px;
background:#999;
height:200px;
padding:15px;
}
.slide{
position:relative;
float:left;
overflow:hidden;
width:0px;
}
.active{
background:#cf5;
color:#444;
}
.button{
white-space:nowrap;
margin-top:180px;
font-size:20px;
line-height:25px;
text-align:left;
}
And the fun part: jQuery !
//+IE678//// HORIZONTAL ACCORDION // roXon //////
var curr = 3; // set desired opened tab
var contW = $('.cont').outerWidth(true);
$('.cont').wrap('<div class="slide" />');
$('.slide').eq(curr-1).width(contW).prev('.title').addClass('active');
$('.title').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.slide').stop().animate({width:0},700);
$(this).next('.slide').stop().animate({width:contW},700);
});
// TITLE ROTATION IE 6-7-8 FIX //
var titleH = $('.title').height();
var btn = $('.button');
btn.css('-webkit-transform','rotate(-90deg)');
btn.css('-moz-transform','rotate(-90deg)');
btn.css('transform','rotate(-90deg)');
if($.browser.msie && $.browser.version<="8.0"){
btn.css({
filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)',
width: titleH+'px',
position:'absolute',
marginTop:'0px'
});
}
One more thing- you'll just have to wrap the accordion into a positioned 'container' with set height and width to avoid accordion elements 'dance' on window resize.