To make this clearer, I'll use my code below:
I have a divider container, "c_container":
<div id="c_container">
<div id="c_tab">Menu</div>
<div id="c_main">MenuContent</div>
</div>
Then I have CSS that controls it's style:
#c_container {
width: 550px;
height: 265px;
position: fixed;
left: -550px;
margin-left: 35px;
top: 50%;
margin-top: -100px;
}
#c_container:hover{
margin-left: 0px;
left: -40px;
}
Then after I update the style using Javascript from an onClick function:
function hideForm(){
var msg = document.getElementById("c_container");
msg.style.left = "-550px";
}
The CSS hover only effects the margin property and doesn't effect the left property as it did before. It's like javascript has locked it.
jQuery:
//Normal:
$('elementNameOrID').hover (function () {
$(this).css('left', 0);
}, function () {
$(this).animate('left', -500);
});
//Nice:
$('elementNameOrID').hover (function () {
$(this).animate({left: 0});
}, function () {
$(this).animate({left: -500});
});
JS:
onclick = function () {
document.getElementById("div").style.left = '-550px';
};
Sidenote: Using div as a name for an element is NOT a good idea and very confusing and misleading when reading your code.
Styles added with the JavaScript style are creating an inline style which has higher precedence than your style sheet. To fix this you can add !important to your style sheet:
#c_container:hover{
margin-left: 0px;
left: -40px !important;
}
Have problem with commas in onclick function ...
onclick="document.getElementById('div').style.left='-550px;'"
and 'div' is not good name for id.
Your CSS is confusing. For apply DIV tag
div {
position: fixed;
left: -550px;
}
div:hover{
left: 0px;
}
OR
#DIV_ID { ... }
OR
.CLASSNAME { ...}
EDIT
I'm recriate your example ... http://jsfiddle.net/PAg9M/1/ and work for me. What you need?
You are facing this problem because inline css haves more priority than the one in"style" tag and javascript add inline css.
So should use only javascript to do this-
modify your html-
<div id="c_container" onmouseover="style.left='0'" onmouseout="style.left='-550'">
<div id="c_tab">Menu</div>
<div id="c_main">MenuContent</div>
</div>
This will sort out your problem.
Related
Hello I want help to close the toggle option when document is loaded, but if you try my current code you will notice that the #A is visible when page is loaded, also i tried all other ways to hide it but on every solution i used it automatically hides the toggle button/link please help me to find a way to initially close the toggle here is my code
html
<div id="A">SideBar</div>
<div id="B">Toggle</div>
JavaScript
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('');
$('#B').toggleClass('extended-panel');
return false;
});
});
CSS
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 250px;
bottom: 0px;
background:#404041;
z-index:999999;
}
#B {
top: 0px;
left: 250px;
right: 0;
bottom: 0px;
}
/* makes the content take place of the SIDEBAR
which is empty when is hided */
.extended-panel {
left: 0px !important;
}
Not sure if this is what you are looking for, but your question is a bit unclear.
Just call toggle on the #A on load.
Here is a fiddle
e.g.
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#A').toggle();
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('');
$('#B').toggleClass('extended-panel');
return false;
});
});
Looking to achieve a dimmed-background effect by dimming (or changing the opacity of) all elements on the page but one; I've been trying out :not() as well as some jQuery selectors to try and exclude all but the element, but to no avail. Does anyone know of the best way to do this with SASS/Compass or, failing that, jQuery?
So far, I've tried things like:
.opacityFade:not(.classToExclude) {
STYLES HERE
}
or
$('controlElement').click(function(){
$(body).not('desiredTargetToExclude').toggleClass('classThatFadesStuffOut');
});
Ideally, I'd like to avoid having to write more JS and better separate responsibilities,but there might not be a way to do that. Little new to Front-End development, so I'm not aware of a best way to go about doing this; thanks!!
You can achieve this by placing a blanket over all elements, and then pulling the element you want to display out of the DOM order with the z-index property
.item {
background: #f00;
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
}
.item.selected {
position: relative;
z-index: 200
}
.blanket {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
z-index: 100;
}
Note that the element needs to have a non static position.
See http://jsfiddle.net/cyberdash/fCMaT/
you could add another class to the non-dimmed/active div. I'll put together a fiddle.
http://jsfiddle.net/nqT7V/
In Jquery:
$(".item").click(function(){
var $this = $(this);
$this.parent().addClass("dimmed");
$this.parent().find(".item").removeClass("active");
$this.addClass("active");
});
$(".holder").click(function(e){
if (e.target != this) return;
var $this = $(this);
if ($this.hasClass("dimmed")){
$this
.removeClass("dimmed")
.find(".item").removeClass("active");
}
});
I am working for a company and converting flash ad banners in html5.
I need to convert flash image which slides in from the left and at the same time it performs motion blur effect just like a windy effect.
I have converted slide in image but I am not sure how to add a windy effect.
Here is the car image I want to copy and this is my code jsfiddle
Thanks in advance.
HTML
<div id = "wrapper" >
<div id="mainContainer">
<div id="text">
<img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
</div>
</div>
</div>
CSS
#wrapper {
left: 50px;
top: 50px;
width: 300px;
height:250px;
position: absolute;
}
#mainContainer {
background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
width:300px;
height:250px;
overflow: hidden;
position: absolute;
}
#Image_Car {
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
jQuery
$(document).ready(function () {
bannerAnimation();
});
function bannerAnimation() {
//Jquery Animation
$("#Image_Car").animate({
left: "30"
}, 500, function () {
$("#Image_Car").animate({
left: "10"
}, 200);
});
}
Jquery is not going to help you create motion blur unless you use a canvas, which nearly no one use for creating ads,
or,
you can create multiple instance of the images and place in same place, then animate each with slight time interval and opacity.
This is very good plugin for you:
DEMO
plugin
I am attempting to apply a tint of #e30009 on hover of some images.
I tried with Javascript and a div that was placed over the image, however the overlay kept flashing on mouseover?.
See my JSFiddle: http://jsfiddle.net/vX96M/
$(document).ready(function() {
overlay = $("#overlay");
img = $('#rob');
overlay.width(img.css("width"));
overlay.height(img.css("height"));
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");
overlay.css('opacity',0);
$('#rob').delay(500).hover(function() {
$('#overlay').fadeTo('slow',0.9);
})
})
I also tried with pure CSS but I cannot seem to achieve the correct color. I did:
img:hover { -webkit-filter: sepia(90%) hue-rotate(90deg); }
Best bet here is to probably set the overlay as "display:none;", delegate the events and then use an addClass vs removeClass function. Main issue is that the overlay is interfering with the mouseover events, so just add another function for that. See jsfiddle below:
http://jsfiddle.net/vX96M/2/
$(document).on('mouseenter', "#myimg", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#myimg", function () {
$('#overlay').removeClass("show-as-block");
});
$(document).on('mouseenter', "#overlay", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#overlay", function () {
$('#overlay').removeClass("show-as-block");
});
Also should set the width and height of the overlay and then have a class to display as block.
.overlay {
display: none;
position: absolute;
border-radius: 50%;
background-color: rgba(200, 100, 100, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
width:280px;
height:280px;
z-index:0;
}
.show-as-block {
display:block;
}
What's the most efficient way in jQuery to extend/inherit CSS properties from one element to another?
Desired effect
$('#blah').extendCSSTo('#me') // Is there a plugin or a good way to do this?
$('#me').css({ background: 'blue' });
#me will now have all the CSS of #blah and also background
CSS:
#blah {
padding: 5px;
width: 200px;
height: 20px;
border: 1px solid #333;
font-family: "Verdana";
}
#me {
position: absolute;
left: 5px;
top: 5px;
}
<div id="blah"></div>
<div id="me">test</div>
Edit: This will be used in a plugin so using classes and simply doing .addClass is not an option
I'm looking for the same effect as setting default value for plugin options, but instead for CSS:
$.extend([css object], [#blah css object], [#me css object])
$('#me').addClass('class');
This works, not sure if you can use the css relative to an ID though.
Try this.
function CloneStyle(sourceID, targetID){
var myStyle;
var source = document.getElementById(sourceID);
var target = document.getElementById(targetID);
if (window.getComputedStyle) {
myStyle = window.getComputedStyle(source).cssText;
}
else if (source.currentStyle) {
myStyle = $.extend(true, {}, source.currentStyle);
} else {
throw "antique browser!";
}
target.style.cssText = myStyle;
}
Now call like.
CloneStyle("blah", "me");
$('#me').css({ background: 'blue' });
Fiddle here: http://jsfiddle.net/naveen/3FdDp/
If you were to use CSS classes rather than ID references you could do the following:
$("#me").addClass($("#blah").attr("class"));
Which would copy the classes from #blah to #me