use onClick not possible

Question

I have 2 divs and 1 iframe div. So, i just need to add animation to move this divs to the left, and i don't know how, because i have already onClick. Could you help me?

<div id="page3" onClick='document.getElementById("ifr").src="text2.html";'>2</div>
<div id="page1" onClick='document.getElementById("ifr").src="text1.html";'>1</div>
<div id="middlediv"><iframe id='ifr' width='100%' height='100%' src="text1.html"</iframe></div>

Thank you a lot!!!

So, now i have this java code:

function proc1(){
wwidth=window.innerWidth;
wheight=window.innerHeight;
document.getElementById('rightdiv').style.height=wheight-200-10+'px';
document.getElementById('leftdiv').style.height=wheight-200-10+'px';
document.getElementById('middlediv').style.height=wheight-200-10+'px';
document.getElementById('middlediv').style.width=wwidth-200-10+'px';
}
function MoveGridLeft()
{
   $('#page3').animate({
   'marginLeft' : "+=50px"
   });
 }

and this script stroke <script type="text/javascript" src="jquery.min.js" src="1.js"> 1.js has a code that is above. Animation doesn't work, and scripts doesn't work

score 0 · Answer 1 · edited Feb 23 '17 at 22:13

0

You can call two function in one event

onClick='document.getElementById("ifr").src="text2.html"; MoveGridLeft();'

jQuery function to move

function MoveGridLeft()
{
   $('#page3').animate({
   'marginLeft' : "-=50px"
   });
 }

Updated:

Download jQuery file from this link and add the reference to the project as:

<script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script>

Here is the article which explains how to use CSS3 to animate.

edited Feb 23 '17 at 22:13

That Realty Programmer Guy

1,571
2
22
43

answered Apr 28 '13 at 14:10

Shafqat Masood

2,532
1
17
23

so, jquery it's a library ? i just need to download it? – user2326773 Apr 28 '13 at 14:19
If you're adding a whole library for this, then you might as well move to unobtrusive JavaScript at the same time. – Paul S. Apr 28 '13 at 14:31
i know it, the problem it's that i have a javascript in 1 html file, so i can't make it work, i need to load java from another file, but i need all in 1 file, i know it's stupid, but... – user2326773 Apr 28 '13 at 14:35
if you dnt want to go for jquery , you can use css3 to animate the divs – Shafqat Masood Apr 28 '13 at 14:37
so i have function proc1(){ wwidth=window.innerWidth; wheight=window.innerHeight; //alert(wwidht+''+wheight) document.getElementById('rightdiv').style.height=wheight-200-10+'px'; document.getElementById('leftdiv').style.height=wheight-200-10+'px'; document.getElementById('middlediv').style.height=wheight-200-10+'px'; document.getElementById('middlediv').style.width=wwidth-200-10+'px'; } function MoveGridLeft() { $('#page3').animate({ 'marginLeft' : "+=50px" }); } – user2326773 Apr 28 '13 at 14:55
Note: this current answer's payload `'marginLeft' : "+=50px"` animates a div to the *right* instead of animating it to the left. – GitaarLAB Apr 28 '13 at 18:02

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

All javascript code in inline handlers like onclick is automatically wrapped in a function, see this question on SO.

So, there is no reason why you can't add extra statements (or function-calls in this case), like:
onclick="document.getElementById('ifr').src='text1.html'; moveDivLeft();"

Update (to your updated question):

Java has nothing to do with EcmaScript dialects like javascript.
The (JQuery dependent) function MoveGridLeft that you copied from Shafqat Masood's answer increases the left margin, so it moves the div to the right instead of moving it to the left. Depending on your code you would need to set the correct properties (like left|right position|margin) to achieve your goal (taking in account your existing markup/layout/style). Have a look at this example jsfiddle based on all your comments (below this question): jsfiddle.net/t74fT/3/
The line: <script type="text/javascript" src="jquery.min.js" src="1.js"> is wrong: you gave it 2 sources which is not valid markup.
Each (external) script gets it's own script-tag, like:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="1.js"></script>
Note that now you have 3 files instead of just 1 like you originally asked.

edited May 23 '17 at 12:16

Community

1
1

answered Apr 28 '13 at 14:15

GitaarLAB

14,536
11
60
80

Ok, i undterstood, but can i make it with pure javascript? – user2326773 Apr 28 '13 at 14:17
given your question I figured you'd knew how to 'animate' the div's but didn't know how to hook it up using `onclick`. But you need a pure javascript animation now? Maybe update your question to tell us more about what and how (and how fast etc.) you want to animate. – GitaarLAB Apr 28 '13 at 14:21
a problem that i have just 1 html file, and on it, so i can't load jquery...no, it's ok now, i will find how to animate myself, thanks. – user2326773 Apr 28 '13 at 14:27
You can have multiple script tags inside one html-document! So something like this is perfectly valid: ` ` Have a look at [this link](http://www.tutorialspoint.com/javascript/javascript_animation.htm) to get you started with pure javascript animations (using `setTimeout(function, duration);` or `setInterval(function, duration);`) – GitaarLAB Apr 28 '13 at 14:44
and now it doesn't work( – user2326773 Apr 28 '13 at 14:46
here is my java function proc1(){ wwidth=window.innerWidth; wheight=window.innerHeight; //alert(wwidht+''+wheight) document.getElementById('rightdiv').style.height=wheight-200-10+'px'; document.getElementById('leftdiv').style.height=wheight-200-10+'px'; document.getElementById('middlediv').style.height=wheight-200-10+'px'; document.getElementById('middlediv').style.width=wwidth-200-10+'px'; } function MoveGridLeft() { $('#page3').animate({ 'marginLeft' : "+=50px" }); } – user2326773 Apr 28 '13 at 14:48
'java function'? Don't you mean javascript? Note that java has nothing to do with javascript. – GitaarLAB Apr 28 '13 at 14:51
So you meant: `here is my javascript: function proc1(){ etc...` instead of `here is my java function proc1(){ etc..`? What are `rightdiv` and `leftdiv` ? Could it be that you mean `page1` and `page3`? There are also typo's in the code you gave in your comment like `wwidht`. Based on everything you gave us, I did this [jsfiddle](http://jsfiddle.net/q7Lrb/) for you. Stuff is moving with jquery. – GitaarLAB Apr 28 '13 at 15:31
i have 5 divs, top, bottom, left,right, middle, so i have iframe in the middle, and buttons( div page1,3) in the bottom, but i can't make it work...animation doesn't work, and when i loading 1.js, site is loading bad, because script doesn't work, so it's worked only when i putted it at but i can't do that because of jquery.... – user2326773 Apr 28 '13 at 15:46
add/modify the [jsfiddle](http://jsfiddle.net/q7Lrb/) I provided so we can see your problem and layout (click 'run' to test, 'update' to update and post us back the updated link). Also, you might want to re-read my comments as they should address your multiple script / jquery problem. – GitaarLAB Apr 28 '13 at 15:51
http://jsfiddle.net/t74fT/1/ here is without iframe contet, because it's in other files. – user2326773 Apr 28 '13 at 16:01
http://jsfiddle.net/t74fT/2/ First: ` onresize="proc1();">` is wrong, should have been: `` but I just added `window.onresize=function(){ proc1(); };`. Secondly, you where calling `MoveGridLeft()` while the function was called `moveGridLeft()` (first letter as a capital is commonly reserved for objects). Finally, the copy-paste code didn't work because (it was/is unclear what you want to achieve exactly and) if you look at function `moveGridLeft` you see it tries to *increase* `marginLeft` *and* your div's are css-positioned! – GitaarLAB Apr 28 '13 at 16:21
Can't you nest divs `page1` and `page3` (acting as link/button) inside your footer wrapper? That would make things a lot more simple! – GitaarLAB Apr 28 '13 at 16:23
how can i make it a button? ( i mean, to save work the buttons, to save iframe?) – user2326773 Apr 28 '13 at 16:42
and movegridleft it's smoothly animate the buttons? or they just jump to the new position? because i need a slow animation.. – user2326773 Apr 28 '13 at 16:43
As an example an updated fiddle: http://jsfiddle.net/t74fT/3/ Your spaces are illegal in an `id`, so I removed your html: `
`. In the css there is still a `#bottomdiv div` rule: that targets all divs (the buttons that I moved) inside your `bottomdiv`. If you now click `2` (the grey 'button' div with id 'page3') you'll see all buttons (divs) move to the left. A button is done like: ``. I suspect you ultimately want to do javascript [carousel](http://www.google.com/search?q=javascript+carousel). – GitaarLAB Apr 28 '13 at 16:59
it's great, thank you, but anyway, it's moving page1 element, not page3, and my bottom it's doesn't resizing anymore... – user2326773 Apr 28 '13 at 17:00
About the resizing: your fiddle v2 has the bottom-div set (in css) to 100px. It never resized. In my **example** fiddle (that solves the clear questions you've asked and demonstrates the smooth animation of) all 'buttons' (so div id 'page1' and 'page3') move to the left (you asked: '*move this divs to the left*') if you click button `2` (aka div id page3). Until you exactly describe the behavior (of the buttons) you are after, we can't write (guessing) specific (pure javascript) code/examples. However you now do have working examples so you could code your own behavior like you want it to. – GitaarLAB Apr 28 '13 at 17:23
heh, i don't know why, but it works....http://jsfiddle.net/t74fT/5/ in my computer doesn't... – user2326773 Apr 28 '13 at 17:29
You still have this `
` That's not a valid id!!! What do you mean by '*in my computer doesn't*' – GitaarLAB Apr 28 '13 at 17:32
so, it works, thank you a lot!=) i don't know why, buy it's moving) – user2326773 Apr 28 '13 at 17:35

use onClick not possible

2 Answers2