How to center alignment using javascript? - javascript

I want to set "div" alignment to center using javascript. The reason using javascript is not working of "margin:auto" in IE.
I have coded :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>
All Time Set Window
</title>
<script language="JavaScript" type="text/javascript">
$(document).ready(
var winSize = $(window).width();
var margin = winSize % 10;
function setMargin(){
$('#main').css({'margin-left':margin,'margin-right':margin});
}
)
</script>
</head>
<body>
<div id="main" align="center" style="width:1000px; height:100%; text-align:center; border: #000 solid 1px; margin:auto;">
<div id="inner1" style="width:100%; height:20%; background-color:#F8E0E0; float:top; border: #000 solid 1px;">
<div id="inner11" align="center">This is Header</div>
</div>
<div id="inner2" style="width:100%; height:60%; background-color:#F5F6CE; border: #000 solid 1px;">
<div id="inner21" align="center" style="width:70%; background-color:#E3F6CE; float:left;">This is Left Frame</div>
<div id="inner22" align="center" style="width:30%; background-color:#E0E0F8; float:right;">This is Right Frame</div>
</div>
<div id="inner3" style="width:100%; height:20%; float:bottom; background-color:#F8E0E0; border: #000 solid 1px;">
<div id="inner23" align="center">This is Footer</div>
</div>
</div>
</body>
</html>
But, still javascript code is not working properly. What can be the solution ?

Use this code
$(document).read( function($){ ... } )
instead of your code:
$(document).ready( ... )
Or even shorter:
$(function(){ ... })

Related

How to load local html in div from svg <a> click

I am trying to load a new local html page within a specific div when I click on an object within svg. Here is the code I have.
<html>
<head>
<script>
$("#button").click(function(){
$("#div1").load("1.html");
});
</script>
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<style type="text/css">
#div1 {
position:absolute;
top: 15%;
left: 15%;
width:300px;
height:300px;
margin-top: -9px; /*set to a negative number 1/2 of your height*/
margin-left: -15px; /*set to a negative number 1/2 of your width*/
border: 1px solid #FFFFFF;
background-color: none;
}
</style>
<div id="div1">Div Placement</div>
</body>
</html>
I've fiddled with this for a few days with no avail. I do not want to use the div hide/show method if at all possible.
Many thanks!
~ Leo
EDIT
okie I've tried doing what you did on the fiddle but it still will not change the div.
here is what I have now. Yes an index exists within the pages folder.
<html>
<head>
<script type="text/javascript" src="/js.jquery/jquery-2.1.1.min.js"> </script>
<script>
$("#button").click(function(){
$("#div1").text("Loading...");
$("#div1").load("/pages/");
});</script>
</head>
<body bgcolor="#000000">
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<div id="div1">Div Placement</div>
EDIT
Third iteration of code, still not working
<html>
<head>
<meta charset="UTF-8">
<title>Float Test</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$("#button").click(function(){
$("#div1").text("Loading...");
$("#div1").load("/pages/");
});</script>
</head>
<body bgcolor="#000000">
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<div id="div1">Div Placement</div>
</body>
</html>
It works fine for me.
http://jsfiddle.net/sumzujre/
The main problem seems to be that you aren't including the jQuery library. Add this line to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Also, make sure that "1.html" exists. If the server returns an error (eg. 404), nothing will be inserted into your div.
Update:
You will need to make sure the elements exist before you try to add event handlers to them. Either move your <script> block to the end of the file, or you can leave it at the top and surround it with $.ready().
<script>
$(document).ready(function() {
$("#button").click(function(){
$("#div1").text("Loading...");
$("#div1").load("/pages/");
});
});
</script>
I always use ajax. Like this
<div id="my-content"></div>
<a id="button">Click to load</a>
<script type="text/javascript">
$('#button').live('click',function(){
$.ajax({
method: 'POST',
url:'yourPage.html',
success:function(data){
$('#my-content').html(data)
}
})})
</script>
<html>
<head>
<title>Float Test</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body bgcolor="#FFFFFF">
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<style type="text/css">
#div1 {
position:absolute;
top: 15%;
left: 15%;
width:300px;
height:300px;
margin-top: -9px; /*set to a negative number 1/2 of your height*/
margin-left: -15px; /*set to a negative number 1/2 of your width*/
border: 1px solid #FFFFFF;
background-color: none;
}
</style>
<div id="div1">Text</div>
Working iteration of code. I had removed the hashtag within
<a xlink:href="#" id="button" class="button">
in my working code. Thank you for your patience with my lack of thoroughness
</body>
</html>
<script>
$("#button").click(function(){
$("#div1").load("1.html");
});
</script>

raphael moves div content down

Probably super-basic question, but, why do the text on the first div of the table goes down when raphael creates its paper?
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/raphael-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
raph = new Raphael('canvas_container', 600, 600);
});
</script>
<title>Simple JS Page</title>
</head>
<body>
<br>
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div id="text_container" style="height:600px;width:300px;border: 8px solid #f7f7f7;display:table-cell;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;vertical-align:text-top;">
why am I in the bottom???
</div>
<div id="separator" style="height:600px;width:10px;display:table-cell">
</div>
<div id="canvas_container" style="height:600px;width:600px;border: 8px solid #f7f7f7;display: table-cell;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
</div>
</div>
</div>
</body>
</html>
All of the table-imitation css is getting in the way. It looks like you are trying to create two vertical divs, one 300px wide the other 600px wide, with a 10px separator. The same thing can be accomplished using floating, and it plays a little nicer with Raphael.
#text_container, #separator, #canvas_container{
float: left;
}
Fiddle: http://jsfiddle.net/q0aka3s6/

Unable to hide div element using Jquery

In my code i am trying to hide a div element which contains a image, but when i run the code i get - ReferenceError: jQuery is not defined
})( jQuery ); in the file jquery-ui.js (line 314). My code is given below
<!DOCTYPE html>
<html>
<head>
<title>Sliding a div</title>
<script type="text/javascript" src="plugin/ui/jquery-ui.js"></script>
<script type="text/javascript" src="plugin/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#1').click(function(){
console.log("i am inside");
$('#element').hide('slide',{direction:'left'},1000);
});
});
</script>
</head>
<body>
<div id="headder" style="width: 1300px; height: 100px">
<h1>Slide the div</h1>
</div>
<div id="element" style="width: 600px; height: 400px; border: 2px solid red; position: relative">
<img src="images/aa.jpg" width="600" height="400">
</div>
<div id="control" style="position: relative">
<input type="button" id="1" value="PRESS">
</div>
</body>
</html>
Please let me know the reason behind this.
You need to reference jQuery before jQuery UI:
<script type="text/javascript" src="plugin/jquery-1.9.1.js"></script>
<script type="text/javascript" src="plugin/ui/jquery-ui.js"></script>

Unable to drop the image in a target location

I have written a simple code for drag and drop. lets have a look at the code
<!DOCTYPE html>
<html>
<head>
<title>System Drag and Drop Example</title>
<script type="text/javascript">
{
function dragUser(user,oEvent)
{
oEvent.dataTransfer.setData('User',user.id)
}
function dropUser(target,oEvent)
{
var user= oEvent.dataTransfer.getData('User');
alert(user);
alert(target);
target.appendChild(document.getElementById('user'));
oEvent.returnValue=false;
}
}
</script>
</head>
<body>
<p>Try daragging this text to the red box</p>
<p>
<div style="border: 1px solid black; width: 150px; height: 150px">
<img id="img" src="mine,image,life,quote,words,message-5eb746364548d71d07c86e52e63b7b56_h.jpg" width="100px" height="100px" ondragstart="dragUser(this,event)">
</div>
<div id="div2" style="background-color: red; width: 100px; height: 100px; clear: both" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false">
</div>
</p>
</body>
</html>
The problem is that when i try to drag the image from the above div to the lower div with id="div2" than my image is not being dropped instead of it it opens in in a tab as an image.
please let me know the reason behind this.

changing the color of a <div> when clicked

Thanks ALOT guys! I've got it working now, thank you!
I have a hopefully easy question:
This: http://jsfiddle.net/gSAjV/2/
is what I want to achieve, but I can't seem to get it working.
I'm all new to javascript, so I'm not sure how to properly put the script in the html document.
I have tried the <script type="text/javascript"> and others, but it just doesn't work.
So i wondered if anyone would take the time to put it in a html document and get it working, and ofcourse posting the entire code. I would be very greatfull!
my doc:
<html>
<head>
<style>
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
</style>
<script type='text/javascript'>
$('.childDiv').click(function(){
$(this)
.css('background-color','#00ff66')
.siblings()
.css('background-color','#ffffff');
});
</script>
</head>
<body>
<div id="divParent1" class="parentDiv">
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
</body>
</html>
Put this somewhere in your html file:
<script type="text/javascript">
$(document).ready(function() {
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});
</script>
You can put it more or less anywhere, but just before the </body> tag would be a good place.
And as #MarkK has rightly pointed out, you need to reference the jQuery library itself.
This goes between <head> and </head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
In jsfiddle, you can right-click on the Results pane and View Source. This will give you the exact html that produces the result.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});//]]>
</script>
</head>
<body>
<div id="divParent1" class="parentDiv">
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
</body>
</html>
You just need to import jQuery (the library that contains the $ functions). This is simple, just add
<script src="http.//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
to your HTML, before your other script.
<html>
<head>
<!--inclue jquery - change the path 'src'. the default is jquery.js is on the same location of this html-->
<script type="text/javascript" src="jquery.js"></script>
<sript type="text/javascript">
jQuery().ready(function($){
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});
</script>
</head>
<body>
<!--the content paste your html here-->
</body>
</html>

Categories