Some simple Javascript and you (me)!

Synapse

I've been helping a friend build a site for a craft trade they had going. It's built in Cargo Collective (a problem and not my choice). The real issue is that I'm fairly rough around the edges when it comes to Javascript.

Here's the site:
http://rickreimold.com/

I cannot figure out why the images keep dropping/jumping down upon their full appearance when using a photo shuffle and fade method for that index page image. I've used this code:
http://iamacamera.org/sandbox/photoshuffler/

I had to place the div above Cargo's Contents & Layout section to position it correctly - you can't directly edit the HTML of the site but rather they leave you with a custom HTML box.

It seems like I'm just missing something very obvious here.

ObiFett

You have a margin on the img inside the div. Find the css that is adding that margin and you should be ok.

Specifically, look for ".project_content img" in your css file, remove the margins in that.

edit: although taking that out with firebug didn't change it on my screen. So it could also be the break tags around the image

edit2: Yeah, its the <br> tags that are being placed before and after the img tag inside your div. I removed them in firebug and it fixed the problem.

edit3: Some unsolicited critique - If its possible I would change the hoverstate on the main nav items to have the font color be white, not yellow

Synapse

That makes sense good sir, HOWEVER! I cannot remove those break tags since I can't edit the HTML directly, only add JS and CSS to this secondary Customize HTML pane. Pain in the ass it is.

The color choices were not mine, but I'll suggest the change.

ObiFett

If you can add JS, you can change the html of that page, right?

Just write a function that clears out the current html in #photodiv and then writes in what exactly you want, which would basically just be the img tag and not the <br>s

edit: Something like

function fixAnnoyingTemplateSite(){

document.getElementById(photodiv).innerHTML = '<img id="photoimg" \>';

}

edit: if the site uses JQuery the above can be done simpler and cleaner, but I assume that template site doesn't use JQuery

ObiFett

Only downside to the above is that if JS doesn't load or is disabled then you have the problem again, but of course if JS doesn't load or is disabled then your slideshow won't work either.

Synapse

Something following this?

document.getElementById('divStatus').style.display = "none";

Again, I'm rough/green with JS.

ObiFett

It needs to be its own function and only called OnLoad because you should only rewrite what is in that div once. So it needs to be completely separate from the JS you are using from that slideshow site and it needs to be called before the slideshow JS is called.

I can help more tomorrow if no one else jumps on this. I got Valentine's day festivities with the wife to attend.

Synapse

I appreciate the help; I'm obviously not equipped for this.

I'm trying to pinpoint what to do here:
<script language=javascript>
object.onload=""
function destroyDiv() {
var div = document.getElementById("photodiv");
div.parentNode.removeChild(div);
}
</script>

OR

var elm = document.getElementById('photodiv');
if(window.close){
elm.innerHTML="";
}else{
elm.textContent="";
}

ObiFett

Try exactly this:

function fixAnnoyingTemplateSite() {

document.getElementById('photodiv').innerHTML= '<img id="photoimg" src="http://payload.cargocollective.com/1/1/62380/740174/title_slideshow_01.jpg&quot; />';

}

Then run that function right before you run photoShufflerLaunch(). That should work.