www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

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

  1. #1
    Join Date
    Apr 2014
    Posts
    12

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

    Hi
    I've been working on my website www.joshuaechevarria.com

    I wanted to create popup windows for some of my images so that when you hover over the image and pop up box will show up and give a description or something. Anyway I managed to figure that out for one image. When I went to go repeat that method I removed my previous attributes such as the images and description BUT when I hover over that second image the same pop up shows up : please see the script below.

    This was the successful script. If you go to my site you will see it in the cinematography section on the bottom middle there is an image that say coming soon Bescherming. If you hover over it then the pop up will show up.

    <html>
    <title>CodeAve.com(JavaScript: Hover
    Window within Previous Page)</title>
    <body bgcolor="#FFFFFF">

    <script language="JavaScript">
    <!--
    // This is the function that will open the
    // new window when the mouse is moved over the link
    function open_new_window()
    {
    new_window = open("","hoverwindow","width=475,height=525,left=10,top=10");

    // open new document
    new_window.document.open();

    // Text of the new document
    // Replace your " with ' or \" or your document.write statements will fail
    new_window.document.write("<html><title>JavaScript New Window</title>");
    new_window.document.write("<body bgcolor=\"#000000\">");
    new_window.document.write('<img src="http://s27.postimg.org/krcprrm7n/Bescherming.png height="500" width="450">');
    new_window.document.write("<br>");
    new_window.document.write("</body></html>");

    // close the document
    new_window.document.close();
    }

    // This is the function that will close the
    // new window when the mouse is moved off the link
    function close_window()
    {
    new_window.close();
    }

    // -->
    </script>


    <a href="#" onMouseOver="open_new_window()" onMouseOut="close_window()"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>




    </body>
    </html>


    So Then I repeated this and got rid of the links and you will see this on my site as Open Hover Window. The issue with this is that even nothing is placed in the new_window.document.write section but when you hover over it, the image from the original

    // open new document
    new_window.document.open();

    // Text of the new document
    // Replace your " with ' or \" or your document.write statements will fail
    new_window.document.write("<html><title>JavaScript New Window</title>");
    new_window.document.write("<body bgcolor=\"#FFFFFF\">");
    new_window.document.write(" ");
    new_window.document.write("");
    new_window.document.write("<br>");
    new_window.document.write("</body></html>");

    // close the document
    new_window.document.close();


    Below is the full code

    <html>
    <title>CodeAve.com(JavaScript: Hover
    Window within Previous Page)</title>
    <body bgcolor="#FFFFFF">

    <script language="JavaScript">
    <!--
    // This is the function that will open the
    // new window when the mouse is moved over the link
    function open_new_window()
    {
    new_window = open("","hoverwindow","width=300,height=200,left=10,top=10");

    // open new document
    new_window.document.open();

    // Text of the new document
    // Replace your " with ' or \" or your document.write statements will fail
    new_window.document.write("<html><title>JavaScript New Window</title>");
    new_window.document.write("<body bgcolor=\"#FFFFFF\">");
    new_window.document.write("This is a new html document created by JavaScript ");
    new_window.document.write("statements contained in the previous document.");
    new_window.document.write("<br>");
    new_window.document.write("</body></html>");

    // close the document
    new_window.document.close();
    }

    // This is the function that will close the
    // new window when the mouse is moved off the link
    function close_window()
    {
    new_window.close();
    }

    // -->
    </script>


    <a href="#" onMouseOver="open_new_window()" onMouseOut="close_window()">Open Hover Window</a>




    </body>
    </html>



    Can someone help me out?

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    952
    The first thing I want to say is please use [ CODE] or [ HTML] bbcodes when posting code. It really is a hassle to try and read and deal with unformatted code.

    I feel like there will be a lot of additional information I'll be getting throughout the resolution of this issue, but to start there isn't anything in your code that would specify multiple (unique) pop-up windows. If you have 1 function that creates a popup window and you are not passing or using dynamic content for that window, it will always open the exact same window.

    You will have to pass in information to your open_new_window() function for each link so that the function knows which image to load content for. For example:
    HTML Code:
    <!doctype html>
    <html>
    <head>
    	<title>CodeAve.com(JavaScript: Hover Window within Previous Page)</title>
    </head>
    <body bgcolor="#FFFFFF">
    
    <script>
    var $imgDescriptions = [
    	"This is a description for image #1",
    	"This is a description for image #2",
    	"This is a description for image #3",
    	"This is a description for image #4",
    	"This is a description for image #5"
    ];
    
    function open_new_window($a) {
    	new_window = open("","hoverwindow","width=475,height=525,left=10,top=10");
    
    	// open new document
    	new_window.document.open();
    
    	// Text of the new document
    	// Replace your " with ' or \" or your document.write statements will fail
    	new_window.document.write("<html><title>JavaScript New Window</title>");
    	new_window.document.write("<body bgcolor=\"#000000\">");
    	new_window.document.write($imgDescriptions[$a]);
    	new_window.document.write("<br>");
    	new_window.document.write("</body></html>");
    
    	// close the document
    	new_window.document.close();
    }
    
    // This is the function that will close the
    // new window when the mouse is moved off the link
    function close_window() {
    	new_window.close();
    }
    </script>
    
    <a href="#" onMouseOver="open_new_window(0)" onMouseOut="close_window()"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>
    
    <a href="#" onMouseOver="open_new_window(1)" onMouseOut="close_window()"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>
    
    <a href="#" onMouseOver="open_new_window(2)" onMouseOut="close_window()"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>
    
    <a href="#" onMouseOver="open_new_window(3)" onMouseOut="close_window()"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>
    
    <a href="#" onMouseOver="open_new_window(4)" onMouseOut="close_window()"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>
    
    </body>
    </html>
    This example gives you an array where you would store the specific content related to each image (whether it's a description, image, etc.). And then on your page you simply have each link load a specific one by adding the number (array index) as an argument for the open_new_window() function.


    A few more things to note, the <title> tag needs to be inside of the <head> tag, which doesn't exist on your page (I only bring it up for the sake of standards and valid code).

    And lastly, from a user experience standpoint (as well as a general functionality perspective), using popups for hover events to display any information is a terrible idea. Most modern browsers block popup windows by default, thus ruining the functionality of this script. Plus popup windows are not as user-friendly as some would like to believe. They are somewhat intrusive and shouldn't be used in such a prominent way on a page. A better idea would be to use an 'inline' method of displaying the data. For instance a simple <div> element that is hidden on the page. You can have this <div> appear when hovering an image and populate the <div> with your custom descriptions. Or you could even go along the lines of a modal type of window (like you would see with something like lightbox or jQuery UI's .dialog() method).
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Apr 2014
    Posts
    12
    Sup3rkirby thank you for your prompt reply. I apologize for not using the necessary bbcodes. I used to know html code fairly well but sort of fell out of it and I am now trying to familiarize myself with javascript so forgive me for my ignorance. I agree with your last point and will heed that advice. I am not at all familiar with lightbox or jQuery. I just downloaded a lightbox generator application so hopefully that will be of assistance for me. I was also curious if I could do an onClick function and then an onMouseOut function for the same image. Again I'm not too keen on all of this so I appreciate all you have to say. Thanks

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    952
    If you use lightbox as a solution, you won't need to set onclick or onmouseout events. Lightbox itself will handle all of that (for the most part). When you click an image it will open up a modal window (inside of the current window, but overlaying all other content) that will display a larger or full size version of your image as well as a description you can specify. This modal window is given an 'X' in the top corner to close it (or clicking somewhere on the page outside of that image generally closes it as well). Lightbox is a fairly popular 'tool' for image galleries so it might be the best place for you to start with this.

    I don't know what a 'lightbox generator application' is, so I'll make sure I specify everything here.
    Here is the latest version of lightbox: http://lokeshdhakar.com/projects/lightbox2/
    As you scroll down on this page there are instructions for how to set up lightbox which basically has you include 2 javascript files (jQuery and the lightbox script), a css file (lightbox) and you will need to copy over some image files included with the download (used for the lightbox interface).

    Once you have lightbox on a page you would basically end up with something like this for your images:
    HTML Code:
    <a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="This is image description #1"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>
    
    <a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="This is image description #2"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>
    
    <a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="This is image description #3"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>
    
    <a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="This is image description #4"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>
    
    <a href="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" data-lightbox="gallery-1" data-title="This is image description #5"><img src="http://s11.postimg.org/odg3t4s6r/9081481_orig.png" border="0"></a>
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Apr 2014
    Posts
    12
    Okay great. Thanks for the link. I'll check it out - the lightbox generator wasn't very helpful. Thanks for the examples also. I look forward to trying it out.

  6. #6
    Join Date
    Apr 2014
    Posts
    12
    Okay so I tried it out and kind of got it. The lightbox is showing up but those images arent showing up like the x, loading image etc. Also its width is taking up the entire page and it cuts off my description at the first line.
    http://joshuaechevarria.com/cinematography.html# same image

    I uploaded all the lightbox js and css files as well as the img folder to my ftp server for the site and then used the following code

    HTML Code:
    <br>
    <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="Bescherming ("protection" in Dutch) honors the coming-of-age story of two young girls in World War II Holland.
    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.
    
    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.
    
    Summer 2014 Release
    
    HD, 16:9
    
    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>

  7. #7
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    952
    You can't use double quotes (") in the description, as those are what the entire description is wrapped in. So for instance Bescherming ("protection" in Dutch) breaks the title/description once it gets to that first quotation mark. And once that happens the HTML essentially goes crazy because everything that follows is read as a property/attribute (none of which would be valid).

    I'm not entirely sure about line breaks. I would fix your quotation issue first and see what happens. If it doesn't solve the issue, try replacing each new line with an HTML <br> tag instead.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  8. #8
    Join Date
    Apr 2014
    Posts
    12
    Stupid me. Should have noticed that. Seems to be working well. My only issue now is how to adjust the width. Its taking up the entire screen. And then, ideally, Id like to place the image on the left and have the description on the right. Do have to go into the lightbox.css document in dreamweaver and adjust it?

  9. #9
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    952
    The width issue is a bit strange to me honestly. I can't see why it would be doing that and it shouldn't be happening by default in lightbox.

    As for getting the text to appear on the right, that would require a modification of the lightbox CSS, yes. I'm not sure if you are familiar with using the developer console in any browser (right-click something on the page and select 'Inspect Element' or press F12 on the page), but you can use this to identify the classes you need to modify. At a base level it looks like .lb-outerContainer and .lb-dataContainer are the main classes (outer is the image, data is the description). There are several elements and classes nested inside of these, but those are the main 2 that you would need to adjust to get them side-by-side.

    Oh and I almost forgot, the missing images. It actually looks like those are all correct. As I investigate it seems you load jQuery on your page twice (once using the new version lightbox includes and once at the top of your page, using an older version of jQuery, 1.7). I think you should remove the 1.7 jQuery include near the top of your document. It's probably causing the width issues as well as the additional images (close, next, loading, etc) not showing up.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  10. #10
    Join Date
    Apr 2014
    Posts
    12
    I guess the width isnt a huge deal since I plan on adjusting the placement of the image and description but its still odd and if I could find a way to control it I would.

    I adjusted the color in the CSS file and saved it and reuploaded to my FTP server and the color hasnt changed. . Where am I going to remove the jQuery 1.7? I'm not sure I can get rid of it because its an iPage hosting website and I think its automatic in their website developing software. Maybe I can copy that jQuery 1.7 and use it in the coding that I have for the image?

  11. #11
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    952
    Hit Ctrl + F5 to refresh your page and clear any cached files (like the CSS). The color changes you made went through.

    It also looks like you removed the jQuery (version 1.11) include lightbox came with. It does seem that it helped a little, but now lightbox is using the version from the top of your page (1.7) which is outdated and thus lightbox doesn't quite function as it was fully intended. You won't or don't need to copy it or anything, it's just that you only want jQuery to be included on the page once. And you would honestly want the most recent version.

    I'm afraid I don't know how you could remove it if iPage is indeed automatically putting this on the page for you. Does iPage give you any sort of way to look at the actual source code of pages you build, or does it only give you the page editor? This could be a bit risky, but if you have FTP access you could copy that page to your computer, open it up in an editor and manually change the jQuery include (swap it out for the 1.11 version). Anything else that uses jQuery shouldn't be ruined by updating the jQuery version, but if anything was using outdated functions/methods they might break. And the other downside would be you'd probably have to make this change every time you save your page with iPage hosting.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  12. #12
    Join Date
    Apr 2014
    Posts
    12
    Awesome. Just noticed it.

    I guess what I could do is access the FTP and remove the jquery that they already have in there and just keep the most updated jquery on there? Ill give it a try and see how that works. I hope it wouldnt ruin any of the previous scripts.

  13. #13
    Join Date
    Apr 2014
    Posts
    12
    So this is the code for the lightbox.css file.

    Code:
    body:after {
      content: url(ftp://joshuaechevarriacom@ftp.joshuaechevarria.com/images/img/close.png) url(ftp://joshuaechevarriacom@ftp.joshuaechevarria.com/images/img/loading.gif) url(ftp://joshuaechevarriacom@ftp.joshuaechevarria.com/images/img/prev.png) url(ftp://joshuaechevarriacom@ftp.joshuaechevarria.com/images/img/next.png);
      display: none;
      
    }
    
    .lightboxOverlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: black;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
      opacity: 0.9;
      display: none;
    }
    
    .lightbox {
      position: absolute;
      left: 0;
      width: 100%;
      z-index: 1000;
      text-align: center;
      line-height: 0;
      font-weight: normal;
    }
    
    .lightbox .lb-image {
      display: block;
      height: auto;
      max-width: inherit;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
    }
    
    .lightbox a img {
      border: none;
    }
    
    .lb-outerContainer {
      position: relative;
      background-color: white;
      *zoom: 1;
      width: 250px;
      height: 250px;
      margin: 0 auto;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
    }
    
    .lb-outerContainer:after {
      content: "";
      display: table;
      clear: both;
    }
    
    .lb-container {
      padding: 4px;
    }
    
    .lb-loader {
      position: absolute;
      top: 43%;
      left: 0;
      height: 25%;
      width: 100%;
      text-align: center;
      line-height: 0;
    }
    
    .lb-cancel {
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto;
      background: url(file:///C|/Users/dick%20hole/Desktop/Website/lightbox-2.7.1/lightbox/img/loading.gif) no-repeat;
    }
    
    .lb-nav {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 10;
    }
    
    .lb-container > .nav {
      left: 0;
    }
    
    .lb-nav a {
      outline: none;
      background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
    }
    
    .lb-prev, .lb-next {
      height: 100%;
      cursor: pointer;
      display: block;
    }
    
    .lb-nav a.lb-prev {
      width: 34%;
      left: 0;
      float: left;
      background: url(file:///C|/Users/dick%20hole/Desktop/Website/lightbox-2.7.1/lightbox/img/prev.png) left 48% no-repeat;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -webkit-transition: opacity 0.6s;
      -moz-transition: opacity 0.6s;
      -o-transition: opacity 0.6s;
      transition: opacity 0.6s;
    }
    
    .lb-nav a.lb-prev:hover {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
      opacity: 1;
    }
    
    .lb-nav a.lb-next {
      width: 64%;
      right: 0;
      float: right;
      background: url(file:///C|/Users/dick%20hole/Desktop/Website/lightbox-2.7.1/lightbox/img/next.png) right 48% no-repeat;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -webkit-transition: opacity 0.6s;
      -moz-transition: opacity 0.6s;
      -o-transition: opacity 0.6s;
      transition: opacity 0.6s;
    }
    
    .lb-nav a.lb-next:hover {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
      opacity: 1;
    }
    
    .lb-dataContainer {
      margin: 0 auto;
      padding-top: 5px;
      *zoom: 1;
      width: 100%;
      -moz-border-radius-bottomleft: 4px;
      -webkit-border-bottom-left-radius: 4px;
      border-bottom-left-radius: 4px;
      -moz-border-radius-bottomright: 4px;
      -webkit-border-bottom-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    
    .lb-dataContainer:after {
      content: "";
      display: table;
      clear: both;
    }
    
    .lb-data {
      padding: 0 4px;
      color: #141414;
    }
    
    .lb-data .lb-details {
      width: 85%;
      float: left;
      text-align: left;
      line-height: 1.1em;
    }
    
    .lb-data .lb-caption {
      font-size: 13px;
      font-weight: bold;
      line-height: 1em;
    }
    
    .lb-data .lb-number {
      display: block;
      clear: left;
      padding-bottom: 1em;
      font-size: 12px;
      color: #141414;
    }
    
    .lb-data .lb-close {
      display: block;
      float: right;
      width: 30px;
      height: 30px;
      background: url(file:///C|/Users/dick%20hole/Desktop/Website/lightbox-2.7.1/lightbox/img/close.png) top right no-repeat;
      text-align: right;
      outline: none;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
      opacity: 0.7;
      -webkit-transition: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -o-transition: opacity 0.2s;
      transition: opacity 0.2s;
    }
    
    .lb-data .lb-close:hover {
      cursor: pointer;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
      opacity: 1;
    }


    I tried using this script which helped with the width and made it fit to the image and text but it would show up at the bottom of the page and you would have to scroll down to look at it. It was also faded.

    Code:
    div.fb-style-wrap
    {
        position: absolute; 
        width: 100%;
        height: 150px;
        top: 25%;
        border: 0
    }
    
    .lightbox
    {
        width: 350px;
        margin: 0 auto;
        border: 0
             color: #F8F8FF;
    }
    
    div

    Do you have any idea what the issue is? Or should I try alternative lightbox codes like slimbox or fancybox?

  14. #14
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    952
    I'm not sure what all the changes you made were at this point. I see you're linking images in your CSS to an FTP location, which doesn't really work as far as I know. And the page itself request a username and password now (probably due to requesting files from FTP instead of an HTTP server). And actually I see some images that are being linked to a local file on a computer, which won't work at all.

    Lightbox should do the trick just fine but you've just got some things to address before you get what you want. Have you tried editing the HTML from the page off the FTP server to replace the jQuery version? This for one would fix some of the initial issues with lightbox. Even if you tried something else, both slimbox and fancybox use even older versions of jQuery so it's possible they won't function correctly using 1.7.

    I think for one you should probably go back to the default lightbox installation. There actually wasn't anything wrong with that CSS, it was the jQuery version that prevented it from getting a proper width. And once you removed the double jQuery issue the images were showing up so they were uploaded and linked correctly to begin with. The only changes you would need to make from the default lightbox install would be to find a way to update your jQuery version and then just adjust the CSS of those two classes I mentioned a few post ago (to get the image and text side-by-side)(the classes were .lb-outerContainer and .lb-dataContainer)
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  15. #15
    Join Date
    Apr 2014
    Posts
    12
    I appreciate all your help. I did they reinstall. Also I copied the Html from the jquery-1.11.0.min file and rewrote the jquery-1.3.2 and replaced it in my ftp>js folder. Not sure what else to do.

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