I have been working on making a shrinking header with javascript, and while I have this jsfiddle working exactly how I want it, I can't seem to get it to work outside of the fiddle.
What is wrong with this html?
<body>
<div id='sizeShifter'>
Here is my website's header
</div>
<div id='spacer'></div>
<div id='content'>
Here is my website's content
</div>
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
<script>
var divToChange = $('#sizeShifter');
var lastScroll = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
var divHeight = 400-st;
divToChange.css({height:divHeight});
});
</script>
</body>
</html>
I can see few issues in your code.
You didn't add CSS file, which is present in fiddle.
jquery-2.1.3.min.js file might not be at correct location. BTW, it is preferred we use jquery from http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js or http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js, unless you have modified version of jquery.
If you can fix them, your code should work :)
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 have integrated a Twitter feed into a website, if the end location (presumably http://twitter.com/something) cannot be reached, the feed does not display. This is ideal, however I have a title div placed directly above the feed which remains visible regardless of whether the feed is displayed on the page or not.
Is it possible to prevent the div (#title) from displaying if a URL cannot be reached? I've found JavaScript snippets which look to hide a div based on the URL of the file being viewed, but this doesn't seem to work in my situation.
HTML:
<div id="title">
<h3>Latest Tweets</h3>
</div>
<div id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/SW_Trains.json?callback=twitterCallback2&count=3">
</script>
</div>
Many thanks in advance. I understand that this may not be possible with JS.
Use this.
<div id="title" style="display:none;">
<h3>Latest Tweets</h3>
</div>
<div id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/SW_Trains.json?callback=twitterCallback2&count=3">
</script>
</div>
<script type="text/javascript">
window.onload = function(){
var tdata = jQuery('#twitter_update_list').html().length;
if(tdata > 0)
{
jQuery('#title').css('display','block');
}
else
{
jQuery('#title').css('display','none');
}
}
</script>
May be it helps to you.
Maybe sth like
var divContent = document.getElementById('twitter_update_list');
if (NOT divContent) {
//no content detected
document.getElementById('title').style.visibility = 'hidden';
}
This is untested and I don't know if it works. You will have to create a function which will be executed when the page has completely loaded. Maybe sth like:
window.onload = function(){
// your code...
};
After load make a function that tests the content of the div that would hold the content. If is empty just hide whatever you need to hide.
I want to replace the current script tag with the HTML contents generated by the same script.
That is, my Page is
<html>
<body>
<div>
<script src="myfile1.js"></script>
</div>
<div>
<script src="myfile1.js"></script>
</div>
</body>
</html>
Inside each .js file corresponding html contents are generated. I want to put the contents as the innerHTML of the parent div. But can't set id for the parent div because the page is not static. So the current script tag must be replaced with the HTML content. How can I do this?
For each script tag src is the same. So can't identify with src. These scripts displays
some images with text randomly. Scripts are the same but displays different contents in divs on loading
Please help me
try inside of myfile1.js:
var scripts = document.getElementsByTagName( "script" );
for ( var i = 0; i < scripts.length; ++ i )
{
if ( scripts[i].src == "myfile1.js" )
{
scripts[i].parentNode.innerHTML = "new content";
}
}
This is a great question for those trying to implement a JSONP widget. The objective is to give the user the shortest possible amount of code.
The user prefers:
<script type="text/javscript" src="widget.js"></script>
Over:
<script type="text/javscript" src="widget.js"></script>
<div id="widget"></div>
Here's an example of how to achieve the first snippet:
TOP OF DOCUMENT<br />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
// inside of widget.js
document.write('<div id="widget"></div>');
$(document).ready(function() {
$.getJSON('http://test.com?remote_call=1', function(data) {
$('#widget').html(data);
});
});
<br />BOTTOM OF DOCUMENT
Have a look at: http://alexmarandon.com/articles/web_widget_jquery/ for the correct way to include a library inside of a script.
document.currentScript has been available since 2011 on Firefox and 2013 on Chrome.
document.currentScript documentation at MDN
<!DOCTYPE html>
<meta charset="UTF-8">
<title>currentScript test</title>
<h1>Test Begin</h1>
<script>
document.currentScript.outerHTML = "blah blah";
</script>
<h1>Test End</h1>
Unfortunately a running JavaScript file is not aware of where it is running. If you use document.write() in the script, the write function will take place wherever the script runs, which would be one way to accomplish what you want, but without replacing the contents or being able to perform any actions on the enclosing DIV.
I can't really envisage a situation where you'd have such stringent restrictions on building a page - surely if the page is dynamic you could generate identifiers for your DIV elements, or load content in a more traditional manner?
Why not use Smarty?
http://www.smarty.net/
You can use javascript in Smarty templates, or just use built-in functions.
Just take a look at http://www.smarty.net/crash_course
poof -- old answer gone.
Based on your last edit, here's what you want to do:
<html>
<head>
<!-- I recommend getting this from Google Ajax Libraries
You don't need this, but it makes my answer way shorter -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function getRandomContent(){
// I expect this is the contents of your current script file.
// just package it into a function.
var rnd = Math.random();
return "[SomeHtml]";
}
$('.random').each(idx, el){
$(this).html(getRandomHtmlContent());
});
});
</script>
</head>
<body>
<div class="random">
</div>
<div class="random">
</div>
</body>
</html>
If you don't mind the script tag remaining in place you can use something as simple as document.write().
myfile1.js:
document.write("<p>some html generated inline by script</p>");
It will do exactly what you need.
<body>
<div id="outer">
<script>var e = document.createElement("div");
e.id = "inner1";
document.body.appendChild(e);</script>
<script>document.write("<div id='inner2'></div>");</script>
The structure I want would be:
html>body>div#outer>div#inner1+div#inner2
the structure I get is:
html>body>(div#outer>div#inner2)+div#inner1
This is terrible beyond my ability to describe, but appears to work for your given situation (I can't tell if you want inner1 and inner2 as children or siblings of outer. this arranges them as siblings).
<body>
<div id="outer">
<script>
var e = document.createElement("div");
e.id = "inner1";
document.body.appendChild(e);
</script>
<script>
var scr = '<script>';
scr += "document.write(\"</div><div id='inner2'>\"); ";
scr += '<' + '/script>';
document.write(scr);
</script>
the closing </script> string is divided to keep the parser from imploding.
how about this?
<script>
// document.write("<div id='inner2'></div>");
var inner2 = document.createElement('div');
inner2.id = 'inner2';
//document.getElementById('outer').appendChild(inner2); //as a child of outer
document.body.appendChild(inner2); // as a sibling of outer
</script>
Look into the jquery documentation. Jquery is a javascript library that you include in your page header. It provides a ton of useful methods for working with the DOM. jQuery is my first choice for writing javascript these days. Straight up js just feels old school to me now. Knowing how to use jQuery effectively (or at least some js library) is a skill every web developer should have. jQuery provides methods like $('css-selector-here').append('what you want to insert'), .prepend(), .insertBefore(), insertAfter(), and .html(), among many others, one of which would probably suit your needs.
Here is a list of all the DOM manipulatuion methods:
http://api.jquery.com/category/manipulation/
Can I clarify your question?
You are getting the following:
<html>
<body>
<div id='outer'>
<div id='inner2'></div>
</div>
<div id='inner1'></div>
</body>
</html>
But what you want is:
<html>
<body>
<div id='outer'>
<div id='inner2'></div>
<div id='inner1'></div>
</div>
</body>
</html>
As long as your div#outer is already defined, you can do the following using jQuery. Quick and easy copy & paste. Please give it a shot!
//If you don't already have jQuery, load it from CDN
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { //Executes after DOM is ready
$("#outer")
.append("<div id='inner1'>INNER DIV 1</div>")
.append("<div id='inner2'>INNER DIV 2</div>");
});
</script>
http://www.globalguideline.com/interview_questions/Questions.php?sc=C_Sharp_Programming_Language_Interview_Questions_A&page=6
In this URL, a user sees on the left side a Twitter picture move. How to do it. What's this technique name? How to do that?
Try to search for floating menu.
There are two types: with fixed and absolute positioning. If you want similar animation as in the example then go with absolute. And if I remember it right IE6 has some issues with fixed position.
Alternatively you can go with jQuery, here is a good example with sources.
You need to hook scroll event to keep content always visible.
Hope this helps you:
<html>
<head>
<title>fixed div</title>
<script src="js/jquery1.4.1.js" type="text/javascript"></script>
</head>
<body>
<div id="div1" style="float:left;left:10px;top:10px;z-index:5000;height:50px;
width:50px;clear:both;background-color:green;color:grey;
font-size:300%;">O</div>
a<br/> b<br/> b<br/> d<br/> e<br/> f<br/> g<br/> h<br/> i<br/>j<br/>
k<br/> l<br/> m<br/> n<br/> o<br/> p<br/> q<br/> r<br/>
<script type = "text/javascript">
$(function(){
var left = 10;
var top = 10;
var d=$("#div1");
$(window).scroll(function(){
var t=$(window).scrollTop() + top +"px";
d.animate({'margin-top':t},'slow');
});
});
</script>
</body>
</html>