www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 20 of 20

Thread: Javascript Repeating in other areas of my website even without the code

  1. #16
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Okay, I'll try to walk through it this time.

    Currently there are a few invalid things in your code, and conflicts that you'll have to resolve.

    The first would be the invalid code.
    HTML Code:
    <head>
    
    <script src="js/jquery-1.11.0.min.js"></script>
    	<script src="js/lightbox.min.js"></script>
    
    <link href="css/lightbox.css" rel="stylesheet" />
    
    <a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="<b>Bescherming (protection in Dutch) honors the coming-of-age story of two young girls in World War II Holland.</b>
    <br>
    <br>
    Uniting from separate faiths, Nurit and Sietske became unlikely friends when Sietske's family agreed to hide Nurit, a young Jewish girl from Amsterdam, in their home in north Holland. Still active in their nineties,  these two women - living across the world from one another - will virtually reunite via Skype to share their lifelong sisterhood of seventy years.
    <br>
    <br>
    With supporting commentary from family and local historians, Nurit and Sietske reflect on the bond they formed while surviving in clandestine solidarity. In doing so, they remind future generations of the realities of the time and assert that faith, friendship and conversation are tools needed to ensure history does not repeat itself.
    <br>
    <br>
    Summer 2014 Release
    <br>
    <br>
    HD, 16:9
    <br>
    <br>
    Filmed on Location in Israel, NYC and the Netherlands "><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png"height="170" width="290" border="0"></a>
    </head>
    This is in the source code for your page. The problem is that <head> tag is inside of the <body> tag. And there is already a <head> tag at the top of the document. You cannot have 2 of these tags in a document and it cannot be inside of the <body> tag.

    The second thing to note about that code is you include the jQuery file, but jQuery is already being included in your code (near the top of the source, inside of the first <head> tag). Including 2 copies of jQuery (and 2 different versions at that) causes conflict as well.

    So to start you should replace that same block of code with this:
    HTML Code:
    <script src="js/lightbox.min.js"></script>
    
    <link href="css/lightbox.css" rel="stylesheet" />
    
    <a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="<b>Bescherming (protection in Dutch) honors the coming-of-age story of two young girls in World War II Holland.</b>
    <br>
    <br>
    Uniting from separate faiths, Nurit and Sietske became unlikely friends when Sietske's family agreed to hide Nurit, a young Jewish girl from Amsterdam, in their home in north Holland. Still active in their nineties,  these two women - living across the world from one another - will virtually reunite via Skype to share their lifelong sisterhood of seventy years.
    <br>
    <br>
    With supporting commentary from family and local historians, Nurit and Sietske reflect on the bond they formed while surviving in clandestine solidarity. In doing so, they remind future generations of the realities of the time and assert that faith, friendship and conversation are tools needed to ensure history does not repeat itself.
    <br>
    <br>
    Summer 2014 Release
    <br>
    <br>
    HD, 16:9
    <br>
    <br>
    Filmed on Location in Israel, NYC and the Netherlands "><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png"height="170" width="290" border="0"></a>
    The only changes I made were to remove the opening and closing <head> tag (as it was duplicated and in the wrong place) and I removed the jQuery javascript include.



    The next step is fixing your jQuery version. Near the top of your source code, inside of the <head> tag there is a javascript include for jQuery:
    HTML Code:
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    This is including version 1.7.2 from google's servers (not your server/FTP). This means you can't replace that file or its contents. If your iPage hosting does not in any way allow you to modify that area of the page or give you an option to select your jQuery version, you will have to manually edit this.

    For this specific page you would log into your FTP and download the 'cinematography.html' file. There you can edit the entire source code of the page. In the source code of this file you would replace the jQuery line I just displayed with this:
    HTML Code:
    <script src="js/jquery-1.11.0.min.js"></script>
    Then you would re-upload the 'cinematography.html' file and reload the page. It should have the correct version of jQuery loaded now so lightbox can function properly. There is a small chance something else using the old version of jQuery might be affected, however I did not see anything in the source that would likely mess up.


    Once you reach this point you should be nearly done. The width issue should be fixed and the box should be displaying as an overlay. The last step would be to alter the CSS to move the text beside the image. But I'll save that for after this. Once you have made those changes I'll walk you through editing the CSS to get the desired appearance.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  2. #17
    Join Date
    Apr 2014
    Posts
    12
    I followed everything. The only thing I can not change because of ipage is the Script code for the updated jquery. I tried two options. I rewrote it in Dreamweaver and uploaded it. That didnt work because as soon as I refresh my Website Drag and Drop builder, it rewrites that part back to the early jquery. Ipage also has a Filemanger where you can actually just open the html doc and edit it. Unfortunately this does not work either. It just rewrites it back to the jquery 1.7.2.

    Not sure what other options I have unless I use an older version of lightbox that is compatible with this version of jQuery. I wish Ipage would stay updated.

  3. #18
    Join Date
    Apr 2014
    Posts
    12
    GOT IT! I found an earlier version of Lightbox that works directly with the 1.7.2 version of jQuery. Thank you so much. If you didn't help me along the way I would have given the **** up. The next step is just being able to configure the photo and text placement. Also when I hover over the image, the entire description pops up along with the code. Is there anyway to prevent that?

  4. #19
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    I'll start with the easiest answer. When you hover the image, the description pops up because it's inside of the 'title' attribute. This is not something you can prevent because it's controlled by the browser, which always renders the 'title' property as a tool-tip. However, with lightbox you should be using 'data-title' instead. I can't say I know for sure if it has changed between versions, but as long as it is supported in the older version of lightbox you switched to, then changing the 'title' attribute to 'data-title' instead will fix that issue.

    As for getting the placement of the image and text the way you want it, this will be a little more tricky. You can edit the CSS a bit to get things pretty much set up, but there will need to be a change to lightbox's javascript as well. Lightbox is designed to position the window/overlay according to the image inside. It basically checks the width and height of the image and sets the overlay to fit, then centers this on the page. So the width of that overlay box is not set in CSS, but javascript. But I'll start with the CSS since that's easier.

    The .fancybox-outer class needs to have 'display: inline-block;' added so it can be positioned beside the text. A relatively important thing to note is this won't fix the issue for IE7 (if that is a concern to you).
    Next, the .fancybox-title-inside-wrap class needs to have 2 things added.
    Code:
    width: 420px;
    display: inline-block;
    The 420 pixels is relatively arbitrary. I felt it looked good enough to use based on the content you currently have in the title/description.


    Actually, as I dig further into your code it looks like you are using fancybox now and not lightbox. However, I can't seem to find the .js file for fancybox in your source. I only seem to see the .css include. I'll need to see the source of your fancybox javascript file to help with the changes that need to be made there.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #20
    Join Date
    Apr 2014
    Posts
    12
    I guess because its an older version the date-title code is not applicable. I tried it and it just made all my text disappear and only the image popped up. I cant seem to find the fancybox js anywhere in my ftp folder. It is hosted through ipage's drag and drop builder so I dont think I have much control over it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles