Develop Reference

How can I target a div on my HTML page with Javascript to change the contents of an element?

I've got an interesting question. I'm running Squarespace # buscadprimero.caminoglobal.org
and need to target the top-right button on the navigation (Ingresar, which means login) to bring up a Javascript form provided to me via embed code. The code itself works fine when included as a code block in the body of a page, but Squarespace only allows navigation buttons at the top to be hyperlinks. There's nowhere for me to add code to the button itself, being that it is a largely consumer platform and works great for straightforward application until you try to change the way it works.
They make an allowance for custom code via a "code injection" menu that adds whatever code you want to the HTML header of the page, so I've been trying to target this div, which does not have an id but who's class is external, with Javascript to replace its contents with an onclick listener to bring up this form. Tracking?
Here's my embed code, which like I said is fine:
<script>// <![CDATA[
!function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>
I've been trying document.getElementsByClassName("external").innerHTML; but when set to a var that returns undefined. New to Javascript but not afraid to learn. I'd like to figure out how to properly target the div, first of all, and then replace its contents (which currently is a link to my 404 page) with a Javascript function that activates on click. Thanks for the guidance!

I've tested the following on your site in Chrome, and have successfully changed the content. The page contained multiple ".collection" elements, so i select only the last one:
JavaScript / jQuery
$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");

Thanks to the great help of #Arg0n, I've now got a working login form that appears in the top-right-most button of my site. Using:
$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });
as the function to replace the contents of the div in question, I inserted <span id='cc-login'>Ingresar</span> as the call to the provided embed code:
<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.ho‌​st+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventLi‌​stener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>
Turns out that a little jQuery was helpful in accessing the desired div, and setting its html contents was a bit beyond my area of expertise.
Many thanks to the StackOverflow community for helping me learn about targeting page elements with Javascript to procedurally manipulate its contents.

Swiffy banner doesn't show in non-displayed places in the page

I have several banners im my website.I changed them to Swiffy(from Flash to HTML5).The banners that appear in the top of my page, shows as needed, but other ones, that are located in the bottom of the page( need to scroll down), the banners don't appear. Does anyone know how can I fix that problem. Thank you.
Example of code :
<div id="swiffycontainer" style="width: 549px; height: 110px"></div>
<script type="text/javascript" src="http://gstatic.com/swiffy/v7.3.0/runtime.js"></script>
<script type="text/javascript" src="http://mamul.am/images/banners/vivacell3g4g-324.js"></script>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject, {});
stage.start();
</script>

The Swiffy runtime attempts to determine the viewport of the browser. If it can, it will only render the visible portion of the container element.
Once Swiffy considers an element to be completely outside the viewport it stops rendering completely. Unfortunately, it also stopped checking the viewport at the same time and would never render that element again, even if it was scrolled back into view.
The bug has been patched, and if it was the cause, your footer banners should play correctly now without changes.

This sounds like the issue we're having ... The swiffy code is served within an iframe by DFP which we need to place in parent window .. which appears to give a blank canvas. We've tried to re-initiate the object .. but this just throws up a bunch of js errors
We use this method various other creatives/code without any issues.

Custom Javascript Not Loading On Paginated Pages (Except First Page) In Drupal

I am running the following jQuery that affects elements on a page view.
$(document).ready(function($){
$(".views-field-field-video").click(function() {
$(this).parent().find("a.cboxElement").click();
});
});
The code works perfectly, but only on the first page. When I use the pager at the bottom and navigate to any other page, the script does not work. Then, when I navigate back to the first page, the script also fails.
If I reload the page however, it brings me back to the first page and the script works again.
I am linking a .js file, and link in between the <head> </head> tags using <script type="text/javascript" src="http://source_to_file"></script> It is loading, I can see in the web developer tool.
EDIT:
The classes I am selecting in the script remains the same on all pages.

It sounds like you are only adding click events when the page is first loaded. If you are then dynamically adding HTML (with pagination) then you need to re-add the click events to those new objects.

Sounds like you just need to reatache the event. Drupal gives you a great way to do that right in your javascript:
Drupal.attachBehaviors('.behavior_class');
This will cause a lot of headache if you don't have context passed to your behaviors though.
Make sure your code is wrapped in, for drupal 6:
Drupal.behaviors.clikfocus_map = function (context) {
for drupal 7:
(function ($) {
Drupal.behaviors.ajax_example = {
attach:function (context) {
}
}
})(jQuery);
and your selectors should all have
$('.myselector', context');

Turns out I needed to just turn off AJAX on the view. Sorry to over complicate things, but thank you for all your help!

Shadowbox(Image gallery plugin) shows black window only

I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:
<img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/>
The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.

You're saying that the image is not showing properly in the browser?
It may mean that the file is corrupted. Try re-saving it.
I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.

Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.
First, make sure your call to jQuery is before the call to shadowbox.js file.
Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.
The problem could be with using jQuery and your Class Name of thumbnails.
If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.
Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.
Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.
I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.

I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.

It's an old question but no one answered correctly to this subject.
solution is here:
just replace "left" values with "right" and "right" values with "left" in shadowbox.css

Open the shadowbox.css and set direction:ltr for #sb-container

Preload and run jQuery/javascript before viewing the page

I'm working on a project where there's quite a lot of jQuery going on. So when I go to the page, I can see the jQuery running (e.g. $.button() elements on the page still appear as normal html elements before jQueryUI is loaded :S) so initially it looks all ugly THEN, once all the JS is loaded and executed, it looks "nice".
It's not just a case of preloading images or whatever, I want to RUN the jQuery code, but "hide" it from visitors so that once the page is opened, it looks "nice" straight away OR displays a black screen saying "Loading..." until the jQuery has finished running.
Take a look here: http://www.filamentgroup.com/ , though I'm not sure that actually runs the site's javascript before displaying it, but it shows the basic idea of having a dark screen saying "Loading...".. I suspect that's what happens in large web apps such as SlideRocket though it does use flash... :S

You answered the question yourself. Have some kind of loading screen that hides the page until all of the jQuery is run.
Try something like the following.
This goes at the top of your page:
<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div>
Here's your jQuery:
$(document).ready( function() {
/*
* ... all of your jQuery ...
*/
// At the bottom of your jQuery code, put this:
$('#loadingMask').fadeOut();
});

Wrap all of your jQuery that you want "preloaded" into this :
$(window).load(function() {
//Your jQuery here
});
or alternatively, not all of your jQuery code inside of that wrapper. Rather, put your jQuery DOM changes into a
$(document).ready(function(){
//jQuery
}))
and then have a wrapper for all your site content.
<div id="everything-wrapper">
<!-- put your body here -->
</div>
and set the display to none in your CSS
#everything-wrapper {
display : none;
}
and then with the window load like earlier
$(window).load(function() {
$("#everything-wrapper").show();
// or
$("#everything-wrapper").fadeIn("fast");
// to be fancy with it
});

I was having a similar issue with an artifact popping up briefly during page loads in IE8. The solution I used was to change the visibility of the container to hidden at line 1 of the css. Then showed the element at the end of the jquery file. If the css and jquery start arguing, the element isn't shown until the argument is resolved.

I would have a overlay as part of your static CSS and HTML, then when JQuery loads via
$(document).ready() you can hide the overlay

The answer by Christopher is most likely the way FilamentGroup do it. You can have javascript "preloaded", it loads inline with the rest of the page, and due to it usually being larger than the rest of the page takes longer to download. You can't make javascript load first, that's not the way it works.
However, the principle to make it work is to "hide" your page from view in CSS (or with inline styles as the CSS will still have to load) then once everything is ready in javascript show it all again. If you notice there is a gap between the page displaying (nothing) and the javascript loading showing on FilamentGroup. That is because they hide the page, the javascript loader loads, then once the rest of the javascript has finished it hides the loader and shows the page.

Dude, I did you up a sample. I hope you likes. I use something like this on my own site.
http://jsfiddle.net/jMVVf/