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
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.
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.
Related
So, I found a code/function I wanted to use on this site here: stackoverflow
I then copied the code from the second answer, did some small changes and tested if it actually worked, and I found out it did not. All of the functions from the link work on JSFiddle tho, but none of them work for me in my html document.
I did < script>, didn't work. I tried to make a separate .js document, but the code was still not working.
<body>
<div id="bokse2"></div>
<div id="boksi"></div>
<script src="test.js" type="text/javascript"></script>
<script>
$(function() {
$('#bokse2').click(function() {
$('#boksi').css('margin-left', '-=10px');
});
});
</script>
</body>
The big box (boksi) should move 10 pixels to the left by clicking on the smaller box (bokse2). Just like it does here: JSFiddle
You are missing the include to the jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
I am loading .html content with jquery .load() but the javascript and css is not applied to the one.html/two.html after it is loaded by the .load() function.
Example below:
<head>
<style> styles1 </style>
<link href="stylesheets/style2.css" rel="stylesheet">
<script src="script1.js">
<script>
$(document).ready(function(){
$("button.os").click(function(){
fillmein = $(this).attr("target");
fillmeinfile = $(this).attr("target")+'.html';
$("."+fillmein).load("/contentfolder/"+fillmeinfile);
});
});
...
other scripts
...
</script>
</head>
<body>
<p>the css and any js is applied to this block</p>
<button class="os" target="one">replace</button>
<div class="one">I will be replaced by one.html</div>
<button class="os" target="two">replace</button>
<div class="two">I will be replaced by two.html</div>
</body>
I understand that the one.html/two.html is loaded after the styles and javascript is loaded by the browser but how I get the styles and javascript that is in the <head> to apply to the newly loaded one.html/two.html?
I new to jQuery so let me know how I clarify if needed. thanks!
EDITED
Thanks for providing answers everyone! Updated the code example to clarify what I meant.
copying the <style> and <script> into the one.html and two.html works but if I load the javascript twice it could conflict. for example, having logic that searches $(document), and functions that collapse and expand a section can be called multiple times. Is it possible to have the js and css that was loaded in the main page work on the newly loaded .html files or is there any clean and DRY way to do this?
As suggested by Arun P Johny in his comment
You simply put your CSS inline on the target document and it will be automatically loaded along with the content.
You can write
$('button').on('click','Classname',function(){
//write your structure here
})
This will work for all tags with 'Classname',which are already present or dyanamically added later on.
This question already has answers here:
when and where to put javascript in html
(7 answers)
Closed 9 years ago.
the thing is i'm unable to figure out where to embed javascript in html page whether in head section or body section.
example 1:
<html>
<head>
<title>events</title>
<script>
document.getElementById("b").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<p id="demo"></p>
<button id="b">new</button>
</body>
</html>
in the above example I placed script tags in head section but it is not working.
example: 2
<html>
<head>
<title>events</title>
<script>
function upper()
{
var x=document.getElementById("t");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body >
enter some text:<input type="text" id="t" onChange="upper()"/>
</body>
</html>
in the second example I placed the javascript in head section it is working properly.first example demonstrates that on clicking a button date will be displayed in the second example in a text box when data is entered and if we come out of the box the letters in the box will we converted to uppercase.
To have it more readable I prefer to always place JavaScript in the head section. If you need to access elements from there, use the window.onload event:
<head>
<title>events</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("b").onclick = function() {
displayDate();
};
};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
This would work just fine.
Your second example worked because you just defined a function, you didn't try to access any element.
You can put it in the head. The problem is that your examples are not the same. The first one doesn't work because the current date is retrieved by calling Date(), when it should be new Data().getDate(). The second example works because the code is valid.
The problem you're running into is that you're trying to reference an element before it is loaded into the DOM.
When you're putting the script in the HEAD tag, the dom hasn't been loaded yet and the document.getElementById won't find what you're looking for.
You have a few different options to deal with this. You can put the script at the end of the page, which will work for your small example here.
Probably a better option is to take a look at learning/using jquery or another js utility. Jquery makes it easy to solve this issue by giving you a "ready" event. This ready event will be triggered when the DOM is fully loaded. So:
$(document).ready(
function()
{
$("#demo").html((new Date()).toString());
});
Is all you really need. With this approach, it doesn't matter where the script it on the page.
Not quite sure how to define this issue. I just started working with jQuery and Javascript and pretty much everything is fine, except for when the page initially loads. I have the page fade in, but it looks like all the CSS isn't being applied until the jQuery loads.
I tried this script in my Head tag, but it doesn't work. Help?
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
Whoops: site: http://www.elijahish.com
You should use a Javascript console like Chrome Console or Firefox Firebug to debug your code.
First, you are placing your script block which requires jQuery before jQuery is defined:
<head>
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
...
So you would see the following (in Chrome Console):
ReferenceError: $ is not defined
$(function(){
Second, you seem to be trying to run a script which is accessing (in the first block) an element (#box-container) before it has been seen in the DOM itself. You could use jQuery.ready on that first block, but that could be messy. I would instead suggest you place this right after <div id="box-container"> is defined:
<body ...>
<div id="box-container" ...>
...
</div>
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
$("#box-container").show();
});
})(jQuery);
</script>
Demo: http://jsfiddle.net/5JpVB/4 (I use a setTimeout for dramatic effect.)
Or put it directly after the <div ...> is opened:
<div id="box-container">
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
setTimeout(function(){
$("#box-container").show();
}, 2000);
});
})(jQuery);
</script>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/5/
And the coup de grâce (document.write nothwithstanding):
<head>
...
<script>
document.write('<style>#box-container{display: none;}</style>');
</script>
...
</head>
http://jsfiddle.net/5JpVB/2/
Yes, that is a script that "puts" the style display: none into the header, which "neatly" bypasses some of the conjecture that's been thrown around (there's downsides for each method, more or less). There's an elegance to this method (except, of course, using document.write, which is icky).
And yet another way, using the CSS display: none method:
<head>
...
<style>
#box-container {
display: none;
}
</style>
...
<div id="box-container">
<noscript><style>#box-container{display: block;}</style></noscript>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/3/ (Just the Result page, disable Javascript to see it work.)
You are getting a case of FOUC : http://www.bluerobot.com/web/css/fouc.asp/
And, years later we are still plauged! http://paulirish.com/2009/avoiding-the-fouc-v3/
A variety of solutions are included on this link.
You could also set the style of your content to be hidden before running the javascript that shows the content. Jared shows you a nice way to do this.
Might I make a suggestion that you use combination of CSS and JavaScript, rather than one or the other. I had the same issue using jQueryUI on a site I'm building and found that a lot of these solutions out there would make the contact unavailable to those without JavaScript.
So here is what I did:
CSS:
.flash #wrapper {
display: none;
}
What this does is set the <div id="wrapper"> to hidden only if it is a decendent of the class flash. So to keep it from being hidden from those with out javascript I add the class flash to the <html> element. So it can only be physically hidden if the end user has JavaScript enabled, otherwise they'll at least have access via the unstylized content.
JavaScript:
$('html').addClass('flash');
$(doctument).ready(function() {
/* Do all your stuff */
/* When done show the wrapper with the content stylized */
$(#wrapper).show();
});
Depending on your pages time to load you might get a little flash, but it wont be a flash of unstylized content, which is rather ugly. In my case I had a jQueryUI menu item that would flash the normal <ul> element first then the menuUI item, and my <div> elements are resized with jQuery so that each <div> column is equal hight, but it would flash the different heights first. This fixed it while still giving accessability to none Script enabled browsers.
I have a blog with annotated references like [1] that.
[1]Jake Smith. http://example.com ..............
[2].............
I want it so the [1] in the text is an anchor that links to the [1] in the References. I know I could do this by doing something in the text like [1]and then making every list item in the references have an id, , that is, that is,
<ol>
<li id="ref1"></li>
...
</ol>
But that's a lot of work for me to go through all the blog posts. I'm sure I could make a JavaScript or jQuery function to add this functionality, but then it would not work with JavaScript disabled. So is there some other function I don't know? Like some fancy CSS trick, or should I just use JavaScript to do this?
What are your recommendations?
You could have the links inline so it displays normally when the user has JavaScript disabled. With JavaScript on, just style it as a Wikipedia reference.
Demo: http://jsfiddle.net/6A8nX/
Your options are:
A blog plugin that detects this in the content and forms the link and adds the related id to the appropriate element for you when the HTML is being output
A script that runs and does the same thing after the HTML has loaded.
Manually adding the links by hand.
A blog plugin is your best bet, since surely this is a solved problem (though it would depend on your blogging platform, of course).
CSS is for styling, it can't add links/ids.
In addition, remember that if you are ever going to display multiple blog posts on each page, you will want to add the blog id to the anchor as well. Instead of ref1, you'll want:
ref_[blogid]_[refid]
JavaScript and CSS are the way to go, if you cannot do this on the server side. The following will do what you want:
<html>
<head>
<style type="text/css">
ref {
display:none;
vertical-align:super;
font-size:small;
}
references {
display:block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
window.onload = function(){
$("references").append("<ol>");
$("ref").each(function(index) {
$("references").append("<li><a name=\"ref_"+(index+1)+"\">"+$(this).text()+"</a></li>");
$(this).html("["+(index+1)+"]");
$(this).css("display", "inline"); // hides references unless the script runs
});
$("references").append("</ol>");
}
</script>
</head>
<body>
<p>This is a reference.<ref>http://www.google.com</ref></p>
<p>This is a another reference.<ref>http://www.yahoo.com</ref></p>
<references>
</references>
</body>
</html>
CSS is for presentation, and does not provide logic. Javascript is the best answer in this case, because it provides the tools and logic you need to accomplish the task.