Hello,
I do not know very much about javascript, not much at all to be specific, and i'm french (this means sorry for my english).
since i don't know a lot about html and everything, i'm just changing the css and html on tumblr existing theme (i know it's not the very best solution but it's working for me and i'm improving slowly my knowledge about this world)
so in tumblr you have several pages already created like the one that regroup all your post with the same tag, this page is called http://myblog.tumblr.com/tagged/mytag
Here is my problem : i would like to change the header for each of these pages !
I don't have access to the php code (wich seemed to be the best solution...)
here is when i have one header :
<body>
<div id="header">
<img src="{image:Header}"/>
</div>
</body>
i have code the css so that my header looks fine to me
to answer my problem, i tried javascript :
<body>
<div id="header">
<script>
var image = new Array("{image:Header}", "http://static.tumblr.com/my-other-image.jpg")
if(document.URL.indexOf("/") >= 0) {
image.src = "{image:Header}"
}
if(document.URL.indexOf("/tagged/mytag1") >= 0) {
image.src = "http://static.tumblr.com/my-other-image.jpg"
}
</script>
</div>
</body>
obviously it didn't work, and you may be laughing watching what i wrote...
since i only have 3 or 4 pages i'd like to change, i'm ok with the "dirty solution" with too much code, and i just think that i need an "else" for all the other pages !
Thank you for telling me how to make it work and sorry to take some of your time for a simple thing like this wich may not be even possible. and sorry for talking about my life in my terrible english.
Thank you
you must create a image element, then append to the dom:
<body>
<div id="header"></div>
<script>
var uris = ["{image:Header}", "http://static.tumblr.com/my-other-image.jpg"];
var image = document.createElement("img");
if (document.URL.indexOf("/") >= 0) {
image.src = uris[0]
}
if (document.URL.indexOf("/tagged/mytag1") >= 0) {
image.src = uris[1]
}
document.getElementById("header")
.appendChild(image);
</script>
</body>
Related
This behavior is happening on a intranet website structured for computer based training. I am using a function to change "id" name of a div using jquery on the fly on a single page.
$('#frameTextBg').attr('id','frameTextBg-horz');
It works fine. The problem is that when I navigate to another page, this functions continues to run and any page with div name #frameTextBg is being renamed to frameTextBg-horz.
I navigate to other pages using jquery to load pages inside a div. Note "var NextPage" is declared in each page by the authoring programs html export:
function NextPage() {
$('#content').load(nextPage)
};
How can I stop this function from running on other pages?
Thanks in advance.
Mark
Here are portions of the html markup relevant to the "outside" container that will load each page inside a div named #content.
...
<body class="mainBody" onLoad="resizeCBT();">
<div id="container">
<div id='content'></div>
<div id="footer">
<p id="footerP">LessonName</p>
<div id="footerPG">00 of 00</div>
<div id="footerNav"></div>
<div id="footerID" style="display:block" ></div>
<div id="control" name="control"><div>
</div>
<script type="text/javascript">
$('#content').load("Menu-0.htm");
$( "#control" ).load( "interface/control.htm #select1" );
document.getElementById('control').style.display="none";
</script>
</body>
...
Next are portions of the markup for a single page that runs the function to rename the id:
...
<script type="text/javascript">
var frame_id = 95675
var graphic_1 = "20.png"
var graphic_2 = ""
var nextPage = "a.htm"
var prevPage = "c.htm"
var thisPage = "b.htm"
var menuTitle = ""
var frameTitle = "title"
var sequence = 20
var totalFrames = 26
var manifestName = "No_Flash"
var instructText = ""
var audioFilename = ""
function runAfterPgLoad() {
$('#frameTextBg').attr('id','frameTextBg-off');
}
</script>
</head>
<body>
<div id="header">
<div id="header1"><h1 id="header1t">headerOne</h1></div>
<div id="header2"><h1 id="header2t">HeaderTwo</h1></div>
<div id="header3"></div>
</div>
<div id="GRAPHIC"><img src="20.png"></div>
<div id="TEXT" class="text">Text here.</div>
<div id="frameTextBg"></div>
<script type="text/javascript">
function NextPage() {
$('#content').load(nextPage)
};
function PrevPage() {
$('#content').load(prevPage)
};
document.getElementById('footerID').innerHTML = frame_id;
document.getElementById('footerPG').innerHTML = sequence + " of " + totalFrames;
if (typeof runAfterPgLoad == 'function') {
runAfterPgLoad();
}
</script>
</body>
</html>
Other pages DO NOT have the function:
function runAfterPgLoad() {
$('#frameTextBg').attr('id','frameTextBg-off');
}
Note that some markup has been omitted because this material cannot be disclosed. Sorry if I accidentally cut off any relevant markup.
You're using ajax to replace PARTS of your page. since you're not reloading the entire page, or using a normal "click to go to next page" system, that function will keep working until you tell it to stop, e.g.
var stop_it_already = false;
if (!stop_it_already) {
$('#frameTextBg').attr('id','frameTextBg-horz');
}
This isn't a definitive answer, because I'm still unclear about how exactly NextPage gets called.
You should never have different HTML elements with the same id. Since it's not something you're meant to do, I'm not even sure the specification for HTML says what should happen, so your page may behave differently on different browsers. Does $('#frameTextBg') represent all frameTextBg elements? Or does the browser only let it be one element and, if so, which one?
I used to work on a project which involved embedding lots of not-quite-identical copies of a website in another website. We had to change all the id attributes to CSS classes. Then, assuming all the frameTextBg elements are in different sections of the website, we could write $('.section-1 .frameTextBg'), $('.section-2 .frameTextBg'), etc.
Note "var NextPage" is declared in each page by the authoring programs html export
My client-side javascript is a little rusty, but I think that any declaration not inside a function definition just goes in the global scope anyway. This could cause problems with the latest copy of NextPage running instead of an earlier one. (But I can't tell because I don't see where NextPage is called from.)
You say you're reloading part of the page. Do you really need to reload the part with the <script> element?
I am converting an old programmer's joke program created here in Brazil that is simmilar to MIT's SCIgen but using artistic jargon instead of businnes gibberish.
As the program is far too old (geocities era old) it uses lots of document.write instead of innerHTHML of course.
First question is, is it safe to place like tons of code inside of innerHTMLs? As the original program loads 4 sets of arrays with every possible piece of text that can be combined to form a pseudo-essay, this is a piece of code:
new_window.document.write("<body bgcolor=\"#000000\">");
new_window.document.write("<body text=\"#00FF00\">")
new_window.document.write("<p align=\"center\"><b>"+atitle+"</b><hr></p>");
firstshot = 1;
paragraph = 0;
while(lines > 0) {
if (firstshot == 1) {
if (lines % 101 == 0 && lines % 19 == 0) {
new_window.document.write(tab0.chr(1,0)+tab0.chr(0,1)+tab3.chr(0,0)
.....
...
this continues in a inch long non nested chunk of code, the entire code is here http://jsfiddle.net/jmqdx09g/
I'm experimenting and this is what I got so far:
<body>
<div id="target"></div>
<div id = "myDiv"></div>
<span id = "mySpan"></span>
<br>
<button id="restore">restore</button>
<p> </p>
<form name="form1" method="post" action="">
<input type="submit" name="remove" id="remove" value="remove">
</form>
<p> </p>
</body>
<script type = "text/javascript">
var message =
'<li>Home</li>'+
'<li>About</li>'+
'<li>Contact</li>'+
'<li>Works</li>'+
' <li>Projects</li>'+
'<li>Curriculum</li>'
var message2 =
'<div class="content">'+
'<iframe src="/yourpage.html" frameborder="0" width="600" height="650" scrolling="no">'+
'<p>Your browser does not support iframes.</p>'+
'</iframe></div>'
document.getElementById("myDiv").innerHTML = message; // use innerHTML for block and inline HTML elements
document.getElementById("remove").addEventListener("click", function ()
{
document.getElementById("myDiv").innerHTML = message2;
});
document.getElementById("restore").addEventListener("click", function ()
{
document.getElementById("myDiv").innerHTML = message;
});
and it works as expected which is load a few html stuff, on a press of a button stuff is replaced by an iframe
is the iframe the best solution for this or replacing the entire html with js is the way to go?
the
var message =
'somecode'+
'somecode'+
looks safe until now, but as far as I get into the converting, am I going to have headaches or this method is straight forward as it looks like?
should I use window.onload instead of replacing the content holder div?
My two cents worth...
Is it safe to place like tons of code inside of innerHTMLs?
Safe, yes... Easily maintainable, no. Front end code is for the client so if they choose to hack themselves let them... Of course anything that is sent back to the server should be sanitised and not trusted, but that is a completely different issue.
In my opinion the greatest problem is maintainability.
Next the JS, refactor this into a separate file, start caching variables makes the code easier to look at.
Finally, do you need the iFrame? Or a new window? Couldn't you simply append the "artistic jargon" to the bottom of the current html? Thus saving the headache of the iframes.
I am a complete advocate of non-jQuery, but maybe for you using jQuery's HTML editing API might be a great idea. Could help to abstract some issues into a more readable and maintainable form. Then again, vanilla JS is really awesome and if it can be done that way its a great way to learn.
I've been working on trying to get these buttons to change when clicked - which now works, but now I need them to toggle between the on and off states when the user clicks (so they can turn the buttons on and off). I'm sure this is an easy fix, but I'm new to Javascript and I don't have anyone to bounce ideas off of.
<html>
<head>
<script type="text/javascript">
function changeimage(img, new_src)
{
var cur_src = img.src.substring(img.src.lastIndexOf("/")+1);
if (cur_src == new_src)
{
img.src = img.old_src;
}
else
{
img.old_src = cur_src;
img.src = new_src;
}
}
</script>
</head>
<body>
<img onclick="changeimage(this, 'images/buttonA_on.png')" src="images/buttonA_off.png" />
<img onclick="changeimage(this, 'images/buttonB_on.png')" src="images/buttonB_off.png" />
<img onclick="changeimage(this, 'images/buttonC_on.png')" src="images/buttonC_off.png" />
<img onclick="changeimage(this, 'images/buttonD_on.png')" src="images/buttonD_off.png" />
<img onclick="changeimage(this, 'images/buttonE_on.png')" src="images/buttonE_off.png" />
<img onclick="changeimage(this, 'images/buttonF_on.png')" src="images/buttonF_off.png" />
</body>
</html>
Much thanks!
When I started using JavaScript I wasted a bunch of time trying to do things that other libraries could easily take care of for me. A few months after that I discovered jQuery which has drastically reduced the amount of time I spend on front-end projects. All you have to do is include the jQuery file in an html project and you're good to go.
In jQuery, you can toggle a class on and off with one line. it looks something like this:
$('.toggleimage').toggleClass('on');
In the above example, '.toggleimage' is just a class I gave to a div, toggleClass is the jQuery command, and 'on' is the name of the class I want to toggle. This probably seems like greek right now, but I recommend going through codeschool's jQuery tutorials to get caught up. If you're thinking of doing serious web development... it's a crucial tool. Here is the full code:
link to full code on my Gist
In order to make it work, make sure you have the right file structure. Create a folder, then create the html file there. In addition, create three subfolders (one for css, one for images, one for scripts). The css folder holds your style.css, the images folder holds mario.jpg, and the scripts folder contains your jQuery file. You can substitute in any image you want, just make sure the changes are applied to style.css.
function changeImg(img) {
if ( img.src.indexOf("_off") > 0 ) {
img.src = img.src.replace("_off","_on");
}
else {
img.src = img.src.replace("_on","_off");
}
}
it will work if you have 50x2 different images, named "imgName1_uw.jpg", "img1_moored.jpg", "img2_uw.jpg", "img2_moored.jpg", etc.
may be its helps you
Fellow Programmers! A wonderful afternoon (or whatever the case) to you!
With some assistance of fellow users I was able to manage getting an image to change back and forth between a second image every couple seconds. It's awesome! So I counted out some of the math with the % operator, and sure enough when the image first displays, I get the default broken link image of the browser, but after the 2 seconds everything goes as planned.
So begins this investigative experiment.
I decided instead of swapping automatically, lets make the swap with a button as to be able to investigate the page as long as I would like. But who want's to do the exact same thing again, why not learn another cool trick along the way. That trick is to display both of the images at the same time, such that when the button is clicked they swap places. Same math, different effect for the user. Isn't that awesome!
The goal:
display two images and below them one button. When the button is clicked the images are to swap places. The images that was on the left should be on the right, the one on the right ought now be on the left. Use no jQuery, this is after all a JavaScript experiment (and I have yet to learn much jQuery but I can't wait to get there!)
Browser error console messages:
Interestingly enough firefox give me nothing. I open the browser, load the page in it from VS 2012 clear the error conslole, refresh the page. And nothing.
In chrome (my default browser) however, I get a localhost pic src 404 not found.
I find this strange because this code is on a page that happens to have other code which references those same pictures and works fine. The 2 second auto img flip thing being some of that other code.
debugging:I'm to much of a noob to know what's going on with that. I get the basic Idea and looked into it some. On the VS site there's all this info about setting breaking points and running multiple instance of VS to do something with another engine. I will soon be on youtube to hammer that out. I apologize however, if there is some simple debug fix to this and I should have witnessed it. Hammering through my 2nd web class and that topic has not been covered :(
Here are articles that I found similar to my question.
This was helpful to see how they had set up the if else:
https://stackoverflow.com/questions/15671442/swap-image-with-onclick-not-responding
all in all that turned out to be more that I could read, clearly the writer is more advanced than I.
a second: javascript swap text block onclick anchor link a bit of an information overload I think. There was a lot going on with that, but I never managed to change any of my code after reading through it.
If your curious here is the VS article I briefly mentioned:
http://blogs.msdn.com/b/visualstudioalm/archive/2013/06/28/javascript-native-interop-debugging-in-visual-studio-2013.aspx
And here is my code:
<script type="text/javascript">
function swap_pics() {
var c = 1
//I had:
//var andy_arr = ["andy_white.jpg","andy_black.jpg"];
var andy_src1 = "andy_left.jpg";
var andy_src2 = "andy_right.jpg";
c = ((c + 1) % 2);
if (c == 0) {
//I was using an array which looked like:
// document.getElementById('andy_left').src = "andy_arr[0]";
// document.get ... _right').src = andy_arr[Math.abs(c-1)];
//0-1 abs = 1
//1-1 = 0, so It looks like it should now toggle.
document.getElementById('andy_left').src = andy_src1;
document.getElementById('andy_right').src = andy_src2;
}
else {
document.getElementById('andy_left').src = andy_src2;
document.getElementById('andy_right').src = andy_src1;
}
}
</script>
<div id="mini_lab_5">
<img src=""
id="andy_left"
height="100"
width="100"
/>
<img src=""
id="andy_right"
height="100"
width="100"
/>
<br />
<input type="button" value="Swap"
onclick="swap_pics();
"/>
</div>
Thanks for being a part of the community and making it great!
You could add the images directly to your img tags like this :
<img src="andy_left.jpg"
id="andy_left"
height="100"
width="100"
/>
<img src="andy_right.jpg"
id="andy_right"
height="100"
width="100"
/>
Then your images should appear by default in your page, if not your links to the images are not good.
Then you could replace your current swap_pics function with the following :
function swap_pics() {
var andy_left = document.getElementById('andy_left'),
andy_right = document.getElementById('andy_right'),
andy_left_src = andy_left.src,
andy_right_src = andy_right.src;
andy_left.src = andy_right_src;
andy_right.src = andy_left_src;
}
Here is a simple jsfiddle doing this: http://jsfiddle.net/X9YTP/
Here you go good luck.
<html>
<head>
<script type="text/javascript">
function switchImage () {
var imgleft = document.getElementById('image1'),
imgright = document.getElementById('image2'),
img_left_src = imgleft.src,
img_right_src = imgright.src;
imgleft.src = img_right_src;
imgright.src = img_left_src;
}
</script>
</head>
<body>
<div>
<img id="image1" src="./home-cat.jpg" />
<button id="butnum" onclick="switchImage();">Switch</button>
<img id="image2" src="./images.jpeg" />
</div>
</body>
</html>
I am experiencing some problems with my javaScript hover function on two images. When the user hovers over the arrow image it should change into a hover-version of that image, and if the user clicks on it it should start another javascript function to expand/collapse the below tabs. Here is the live site. The problem is with the arrows on the right side below the navigation.
At first I tried doing this with only HTML code (onMouseOver and onMouseOut, and just load different image), but got a nasty bug where if the user hovered over the first arrow, then the second, and back to the first, then the second would completely disappear.
Now I tried with JavaScript instead, but now you can only see the first arrow, and that disappears if you hover to the right of it.
The annoying part is that it works perfectly fine from the local server, but not on the web server. I've not used much HTML/Javascript before, and never used JQuery. If this can be solved easily with something like that, I would be really grateful for some help on how to do so. I've read some solutions with CSS background, but don't think that would work because the image must work as a button as well?
Here is the JS code for changing the images
var images= new Array();
images[0] = "img/ArrowDown.png";
images[1] = "img/ArrowDownHover.png";
images[2] = "img/ArrowUp.png";
images[3] = "img/ArrowUpHover.png";
function DownChange()
{
document.getElementById("expandAll").src = images[1];
}
function DownGoBack()
{
document.getElementById("expandAll").src = images[0];
}
function UpChange()
{
document.getElementById("collapseAll").src = images[3];
}
function UpGoBack()
{
document.getElementById("collapseAll").src = images[2];
}
Here is the HTML code
<div id="collapse">
<img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange()" onMouseOut="DownGoBack()" onClick="openAll()"></img>
<img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange()" onMouseOut="UpGoBack()" onClick="closeAll()"></img>
</div>
If it is working on your local machine, the problem isn't coming from your JS.
The problem I would guess is that your images are not correctly referenced on your web server. Try using explicit paths from the server root on both your local and remote machine, and try to have both machines mirror each other's folder structure.
img tag doesn't have any closing pair like < / img>. try this code
<div id="collapse">
<img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange();" onMouseOut="DownGoBack();" onClick="openAll();" />
<img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange();" onMouseOut="UpGoBack();" onClick="closeAll();" />
</div>
if that doesn't work then try to find if the images are in the correct folder or the names of the images are correct.
Edit:
I used this code and working fine on mozilla firefox and IE 6 -
<script type="text/javascript">
<!--
var images= new Array();
images[0] = "img/ArrowDown.png";
images[1] = "img/ArrowDownHover.png";
images[2] = "img/ArrowUp.png";
images[3] = "img/ArrowUpHover.png";
function DownChange()
{
document.getElementById("expandAll").src = images[1];
}
function DownGoBack()
{
document.getElementById("expandAll").src = images[0];
}
function UpChange()
{
document.getElementById("collapseAll").src = images[3];
}
function UpGoBack()
{
document.getElementById("collapseAll").src = images[2];
}
-->
</script>
<div id="collapse">
<img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange();" onMouseOut="DownGoBack();" onClick="openAll();" />
<img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange();" onMouseOut="UpGoBack();" onClick="closeAll();" />
</div>