How do I move an HTML div using JavaScript? - javascript

I want my div containing text to move 10px to the right everytime upon click.
Here is the HTML:
<div id='color-div' style='clear:both; position:relative; left:0;'> </div>
And the script:
document.getElementById('color-div').style.right='10px';
My event is already defined and everything else is working as it should.

To move the div to the right, you should add to left, not right
You need to add a clickhandler to your div.
You are setting the style to a fixed value, to increasing it.
Add
onclick="moveRight()"
to your div, and change your javascript to this:
var moveRight = function(){
var current_offset = parseInt(document.getElementById('color-div').style.left);
document.getElementById('color-div').style.left = current_offset + 10 + "px";
}
Check it out here: jsFiddle

you might like to use this little javascript
<script language="javascript">
function example_animate(px) {
$('#example').animate({
'marginLeft' : px
});
}
</script>
<input type="button" value="Move Right" onclick="example_animate('+=50px')" />
and instead of moving it on button click, call this function on div click event.

Using jquery you can achieve this with : Example
HTML :
<div class="click-me"></div>
CSS :
.click-me {
display:block;
height:50px;
width:50px;
background:blue;
position:absolute;
}
Javascript :
$(document).ready(function() {
$('.click-me').click(function() {
$this = $(this);
var currentLeft = $this.offset().left;
$this.css("left", currentLeft + 10);
});
});

Related

jQuery switvching DIVS with fade effect

I have a very simple script to switch out divs. I would like to add in a fading transition to the script so that it is a bit smoother. However I cannot see what I am doing wrong (totally JS incompetent)
Thanks for any advice.
jQuery(document).ready(function( $ ) {
$('#div2, #div3').hide();
$('.show').click(function () {
$('.targetDiv').hide().fadeOut(1000);
$('#div' + $(this).attr('target')).show();
});
});
Your problem lies in this line: $('.targetDiv').hide().fadeOut(1000);
What is does - it sets style display: none; to all your elements you plan to cross-fade.
Also use the right attributes: data-target="#div1" instead of target="#div1" (which is not used for that purpose)
Instead:
jQuery(function($) { // DOM ready
// get all your targetDiv elements
var $fadeDivs = $(".targetDiv");
// Hide all but this one
$fadeDivs.not("#div1").hide();
$('.show').click(function(evt) {
// prevent the browser doing default stuff
evt.preventDefault();
// get the target element - using data-target attribute!
var selector = $(this).data('target');
var $target = $( selector );
// crossfade (don't forget to use .stop())
$fadeDivs.not($target).stop().fadeOut(1000);
$target.stop().fadeIn(1000);
});
});
.targets{ position:relative; height:100px; }
.targetDiv { position:absolute; height:100px; top:0; left:0;}
<div class="targets">
<div id="div1" class="targetDiv"><img src="//placehold.it/100x100/0bf"></div>
<div id="div2" class="targetDiv"><img src="//placehold.it/100x100/f0b"></div>
<div id="div3" class="targetDiv"><img src="//placehold.it/100x100/bf0"></div>
</div>
<a data-target="#div1" class="show">SHOW1</a>
<a data-target="#div2" class="show">SHOW2</a>
<a data-target="#div3" class="show">SHOW3</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Using Textbox Value to Change CSS on Button Click

I am trying to use the value from a user's textbox answer to change the CSS of an image. I want the image border width to change on a button click. This is what I have so far.
$('#submit').click(function () {
var bv = $('#border').val();
$('#pic').css('border-width', bv);
});
#submit is the button id, #border is the textbox id, and #pic is the image id.
All advice is appreciated.
Just try this
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#submit').click(function () {
var bv = $('#border').val();
$('#pic').css('border-style', 'solid');//You should use this line of code to get your requirement
$('#pic').css('border-width', bv);
});
});
</script>
<input type="text" id="border">
<input type="button" id="submit" value="submit">
<img src="http://wallruru.com/wp-content/uploads/2014/08/White-Background-56.jpg" id="pic"/>
Two corrections to your code
You have to initially provide other border parameters keeping border-width dynamic.
You have to concatenate "px" to your border-width variable
JavaScript
$('#submit').click(function () {
var bv = $('#border').val();
$('#pic').css('border-style', 'solid');
$('#pic').css('border-color', 'black');
$('#pic').css('border-width', bv+"px");
});
Here is a working fiddle
Maybe you are forgetting to add a border color and border style to your image so when you add the border width nothing is shown.
This is what I try (and what I think you are doing) and is working fine.
JS
$(function(){
$('#submit').click(function () {
var bv = $('#border').val();
$('#pic').css('border-width', bv);
});
});
CSS
#pic {
border: 0 black solid;
}
HTML
<input type="text" id="border" />
<button id="submit">Click</button>
<img src="" id="pic">
Check out this codepen.
There is nothing wrong with your code.
You might want to check or add a border style to the image.
You might be adding a border-width without having a border.
I tried this code and it worked perfectly after I added a border of
.imageName{
border:1px solid black;
}
$('#submit').click(function () {
var bv = $('#border').val();
$('#pic').css('border-width', bv);
// you can also try this to make it smoother
$('#pic').animate({'border-width': bv + 'px'});
});

Removing a CSS onClick

I'm trying to make my link toggle from left to right. I'm using the code below;
HTML:
$forum_threads = '
<div id="latest_threads_link">
<img src="images/kalachi/latest_threads.png" alt="Latest Threads" title="Click Here to see latest threads of this section.">
<table border="0" cellspacing="'.$theme['borderwidth'].'" cellpadding="'.$theme['tablespace'].'" class="tborder" style="display: none;" id="latest_threads_show">
'.$forum_threads_bit.'
</table>
</div>
';
jQuery:
jQuery(document).ready(function($){
$('a[id^="latest_threads_click"]').on('click', function (e){
e.preventDefault();
$('#latest_threads_show').slideToggle();
$('#latest_threads_click').addClass('latest_threads_link_active');
});
});
CSS:
#latest_threads_link{
left:0;
position:fixed;
bottom:150px;
}
.latest_threads_link_active{
left:200px;
position:fixed;
bottom:150px;
}
I want to make it so when #latest_threads_link is clicked then #latest_threads_show toggleout from left to right and on second click on #latest_threads_link then the table #latest_threads_show hides.
It actually does with my code but the issue is the #latest_threads_link remains on 200px away from left even on second click. I want #latest_threads_link to go left: 0 on second click.
Please help!!
Your problem is that you're adding the class on each click. Instead, change this line:
$('#latest_threads_click').addClass('latest_threads_link_active');
to this:
$('#latest_threads_click').toggleClass('latest_threads_link_active');
use toggleClass :
Demo : http://jsfiddle.net/5Y9mG/6/
jQuery(document).ready(function($){
$('a[id^="latest_threads_click"]').on('click', function (e){
e.preventDefault();
$('#latest_threads_show').slideToggle();
$('#latest_threads_click').toggleClass('latest_threads_link_active');
});
});
Replace
$('#latest_threads_show').slideToggle();
with
$('#latest_threads_show').slideToggle(400, function()
{
if($(this).is(":hidden"))
{
$(this).css({'left':'0px;'});
}else
{
$(this).css({'left':'200px;'});
}
});
It changes the left from 0px to 200px and repeat, etc (toggling).

Shift up div and fade in on option selection

Here's a jsfiddle that I found.
HTML
<div class="container">
<header>
<ul class="sidenav">
<li><h2><a data-region="nav-1" href="#"><span class="title">About</span></a></h2></li>
<li><h2><a data-region="nav-2" href="#"><span class="title">Services</span></a></h2></li>
</ul>
</header>
<div id="nav-1" class="infozone z1"><p>Hello I'm box 1.</p></div>
<div id="nav-2" class="infozone z2"><p>Hello I'm box 2.</p></div>
CSS
.infozone{
float:left;
position:absolute;
height:400px;
width:800px;
display:none;
}
.z1 {
background-color: blue;
}
.z2 {
background-color: red;
}
JS
$('.sidenav a').click(function(){
$('.infozone').fadeOut(550);
var region = $(this).attr('data-region');
$('#' + region).fadeIn(550);
})
What I'm trying to do is...
Instead of regular links, they will be < option >s
If a user chooses a certain option, the div that's related to that
option will fade in while moving up 5px. If there was a div that
faded in before, that div would fade out while moving down 5px.
Here is an updated jsfiddle. Unfortunately, the div's are not fading in/out, and on top of that, I'm not really sure how to add the "moving up/down" effect.
Any help is appreciated!
You are binding click event on option, which doesn't work that way. You need to listen to the change event of the select element.
Try:
$('#stateList').change(function(){
var region = $(this).find(':selected').data('region'); //get the data value of the selected option
$('.state').fadeOut(550);
$('#' + region).fadeIn(550);
});
Fiddle
For your question on animating the margin you can use the callback of fadeOut to achieve this.
$('#stateList').change(function () {
var region = $(this).find(':selected').data('region');
var $visible = $('.state:visible');
if ($visible.length) $visible.animate({
'margin-top': '5px'
}, 550).fadeOut(550, function () {
$('#' + region).fadeIn(550).animate({
'margin-top': '0px'
}, 550);
});
else $('#' + region).fadeIn(550).animate({
'margin-top': '0px'
}, 550);
})
Fiddle
You need to bind event with select instead of option. Try this
$('#stateList').change(function () {
var region = $(this).find(':selected').data('region');
$('.state').fadeOut(550);
$('#' + region).fadeIn(550);
})
Demo
Working DEMO
Try this
$('#stateList').change(function(){
$('.state').fadeOut(550);
var region = $("#stateList option:selected").data('region');
$('#' + region).fadeIn(550);
})

Background Image Rotator with jQuery?

I am working on a website that the background image will fade from one to another, I have it setup and working about 98%. There is just one little problem. When it first loads and does it's first fade it fades to white and then to the image, instead of fading straight into the next image. After that it work beautifully. This is using jQuery 1.9 and I have jQuery noConflict on since the previous developer coded the sites menu using MooTools.
<html>
<head>
<script src="js/jquery.js">
</script>
<script>
var $s = jQuery.noConflict();
function swapImages(){
var $sactive = $s('#myGallery .active');
var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');
$snext.fadeIn(1500).addClass('active');
$sactive.fadeOut(2000, function(){
});
$sactive.removeClass('active');
};
$s(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
</head>
<style>
#myGallery{
position:relative;
width:100%; /* Set your image width */
height:auto; /* Set your image height */
}
#myGallery img{
display:none;
position:absolute;
top:0;
width: 100%;
left:0;
}
#myGallery img.active{
display:block;
}
.home-page-rotator{
position:absolute;
width:100%;
z-index:-10;
}
</style>
<body>
<div class="home-page-rotator" id="myGallery">
<img src="images/1.jpg" class="active" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
</div>
</body>
</html>
I took out all the content so you can test if you wanted but the is everything that runs the background rotation and fade. Also I have the CSS in a seperate file but for posting to here I just put it inline so you can see the CSS behind the code. Let me know what I should do to fix this?
Moving the remove class method to the function call of the fadeout seems to work better for me (at least in Chrome):
<script>
var $s = jQuery.noConflict();
function swapImages(){
var $sactive = $s('#myGallery .active');
var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');
$sactive.fadeOut(2000, function(){
$sactive.removeClass('active');
});
$snext.fadeIn(1500).addClass('active');
};
$s(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
I ran into this problem a while back and I found the easiest solution was to switch from img elements to using two divs and the background-image css url to display your images. I made a simple slider for that a while back. You're welcome to copy whatever you need from it.
Background slider source
In essence, if you have two divs that are absolutely positioned as the background elements, you can cycle their z-indexes and fade them in and out. Furthermore, you can load the next image in a constructed img element and once it has loaded, change the background-image of the hidden div and fade to it. This means that there is no loading shown and you can fade directly into the slideshow.
Here's some pseudo code below, but it would probably be easier to just look at the real functions in the source.
base.next_slide = function () {
"current slide" = "next slide";
base.containers[the_shown_container].fadeOut(duration,function () {
$(this).css({'background-image':'url("' + "Next image url" + '")',
"z-index":"-2"});
base.containers[the_next_container].css("z-index","-1");
$(this).show();
the_shown_container = the_next_container;
});
};
Plugin.prototype.init = function (base) {
$('<img/>').attr('src', "Next image url").load(function() {
base.containers[the_next_container].css('background-image', 'url(' + "Next image url" + ')');
if ("there's only one image in the slider"){
base.containers[the_shown_container].fadeOut(duration,function () {
$(this).css("z-index","-2");
base.containers[the_next_container].css("z-index","-1");
});
return;
}
base.next_slide();
setInterval(base.next_slide ,base.o.interval);
});
};

Categories