How to change a div's property by onclick event? - javascript

I want to change container's property by clicking on an image.
Why this doesn't work:
<script type="text/javascript">
function changeMargin(){
document.getElementById("container").style.margin.top="100px";
}
</script>
<div id="container">
<img id="btnRight" src="img/btnRight.png" onclick="changeMargin()">
</div>

It should be
.marginTop="100px";
Full code:
function changeMargin() {
document.getElementById("container").style.marginTop = "100px";
}

Change:
document.getElementById("container").style.margin.top="100px";
To:
document.getElementById("container").style.marginTop="100px";

Related

jquery start from hidden

I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/

onmouseout function not working properly

I have a small image-like thumbnail inside a div written with onmouseout function.
<div onmouseout="chng()">
<!-- Image Here -->
</div>
With the function chng defined as:
function chng(){
alert('Hi');
}
My problem is that when I move my mouse pointer just a little it alerts!
What I want is only the alert comes if the mouse pointer is entirely outside of the div.
jQuery can help:
<div id="my_div">image here</div>
<script>
$(function(){
$("#my_div").hover(function(){
// Put here some action for onMouseOver
}, function(){
// Put here some action for onMouseOut
});
});
</script>
Or even:
<div id="my_div">image here</div>
<script>
$( "#my_div" ).mouseout(function() {
// Put here some action for onMouseOut
});
</script>
<html>
<script language="javascript">
function chng()
{
alert("mouseout");
}
</script>
<body>
<div onmouseout="chng()">
//Image Here
</div>
</body>
</html>

Javascript onclick events

I want to blur my images by clicking on it. I am using javascript on click event for this purpose. But it is not working exactly as I want. My code is given below:
<script>
$(document).ready(function(){
$(".ww").click(function(){
$(this).css("opacity","0.2");
});
});
</script>
<div class="bg">
<div class="img ww1"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
<div class="bg">
<div class="img ww2"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
I want that when I click first image then its opacity would set. And that when I click second image so the opacity of first image would finish and second image would set.
As the others already tried to explain, you have to use a selector which actually selects both elements, since you want to bind the event handler to both of them. $('.ww') does not select any element in the code you posted.
Toggling the opacity can be easier done when using a class:
.selected {
opacity: 0.2;
}
Add the class to the clicked element and removed it from the element currently having the class:
$(".img").click(function(){
$('.img.selected').add(this).toggleClass('selected');
});
Have a look at this DEMO. This should give you enough information to apply it to your situation.
Because a selector .ww does not match ww1 and ww2.
You can see that with
console.log($(".ww").length);
Use the common class img or add the class ww.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#my').toggle(
function(event) {
$(event.target).css('opacity',0.4);
},
function(event) {
$(event.target).css('opacity',1.0);
}
);
});
</script>
</head>
<body>
<body>
<div id="my">asdf</div>
</body>
</html>

Set div height dynamically using inline CSS and invoking a javascript function

For my purposes, I need to set the div height as quickly as possible.
Using the document.ready() event is not fast enough, so I want to set the inline CSS style of the div.
How can achieve something like this?
<div id="map-container" style="height:javascript(getwindowheight)px;">
<div id="map">
</div>
</div>
function getwindowsheight() {
return window.height;
}
Any suggestions?
Since you want it to be dynamic, you will need to pay attention to the following events:
window resize
window ready
Set your HTML first:
<div id="map-container"></div>
And then inside your JavaScript, setup a function to detect those:
var applyMapContainerHeight = function() {
var height = $(window).height();
$("#map-container").height(height);
};
document.ready(function() {
applyMapContainerHeight();
});
$(window).resize(function() {
applyMapContainerHeight();
});
Then don't use document.ready
just execute your js after div
<div id="map-container">
<div id="map">
</div>
</div>
<script type="text/javascript">
$('#map-container').css({ height: 'your height'});
</script>
Provided that jQuery is script files are included in the very beginning of your HTML, place some scripting right after the div declaration:
<div id="map-container">
<div id="map">
</div>
</div>
<script type="text/javascript">
$("#map-container").height(getwindowsheight());
function getwindowsheight() {
return window.height;
}
</script>
<div id="map-container">
<div id="map">
</div>
</div>
<script type="text/javascript">
document.getElementById("map-container").style.height= $(window).height() + "px";
</script>

Javascript function to change button colour

Can someone show me whats wrong with this:
<html>
<script type = "text/javascript">
function colourGreen()
{
document.getElementById("button1").style.bgColor = 0xFFFF00;
}
</script>
<body>
<form action="">
<div id = "button1">
<input type="button" value="Colour">
</div id>
<div id = "button2">
<input type="button" value="Price up" onclick = "colourGreen()">
</div id>
<div id = "button3">
<input type="button" value="Price down">
</div id>
</form>
</body>
</html>
document.getElementById("button1").style.backgroundColor = '#FFFF00';
Try:
document.getElementById("button1").style.backgroundColor = '#00ff00';
It is backgroundColor not bgColor
You can create a css rule and change the className of the button to link to that rule.
<style type="text/css">
.buttonColor{
background-color: green;
}
</style>
<script type ="text/javascript">
function colourGreen() {
document.getElementById("button1").className = "buttonColor";
}
</script>
That way if you for some reason decide to change the color or the background you will not have to change it on every page. You will be able to change that one css file.
I'd try
.style.backgroundColor = 0xFFFF00;
I assume your divs are only as big as your buttons and are therefore hidden by the buttons themselves. Change the colour on you button itself instead of the div?
A neater and more reliable way to to edit css of items is using jquery selectors. $("#button1").css("background-color","#ff0000");
Be sure to include the jquery .js file before trying this or you'll get an object expected error.

Categories