SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    JavaScript <div> Refresh

    Hi Everyone,

    Before I post my code...
    All I really need to know is how to refresh the content of a <div> tag during runtime with JavaScript. I will have "next" and "previous" links on a <div> layer and when they are clicked, my JS function will assign the right 'src=""' to an <img> tag. How can I refresh only the <div> element and not the whole page ?

    I guess I could try 'Lightbox' if this is too complicated...

    Here is an image to make you understand it better :



    I have a page with a <div> layer which is hidden when the page is loaded, and then on the main page content, I have some thumbnails of full size images which I generate with php gd.

    The code and link of each generated thumbnail on the main page :

    HTML Code:
    <a href="#" onclick="image_show('{$product.img.type1[images_1].name}');" title="View the full size image"><img border="0" src="{$domain}/includes/crop.php?img_name={$product.img.type1[images_1].name}&amp;setw=100&amp;img_type={$product.img.type1[images_1].type}"></a>
    Then the JavaScript function named 'image_show();' :

    HTML Code:
    <script type="text/javascript">
    <!--
    
    function image_show(img_name)
    {
    	var sw = screen.width;
    	var sh = screen.width;
    	
    	document.getElementById('image_tag').src = '../uploads/' + img_name;
    	document.getElementById('image_full').style.width = sw - 25 + 'px';
    	document.getElementById('image_full').style.display = "block";
    	
    	slowly.fade('main');
    }
    
    -->
    </script>
    And atlast the code of the hidden <div> tag which is made visible by the JavaScript function :

    HTML Code:
    <div id="image_full" align="center" style="display:none ; position:absolute ; top:50px ; width:1024px ; z-index:99">
    
    <table cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <div style="background-color:#FFFFFF ; padding:5px">
    <img style="border:2px #999999 solid" id="image_tag" src="" alt="Image" /><br/><br/>
    <a href="#" onclick="image_hide();" class="textblue_links" title="Close this image.">
    <img src="{$domain}/images/buttons/close.gif" border="0" alt="Close" /></a>
    </div>
    </td>
    </tr>
    </table>
    
    </div>
    Sorry for all the code. It's all pretty straight forward, and it all works perfectly fine, but I was hoping to implement "next" and "previous" links on the hidden div which is made visible to load the next and previous images in my array. I can set the <img> src but the problem is, how do I refresh the <div> element's content ?

    Thanks in advance for any help!!! It will be majorly appreciated.

    All the best,
    Contrid.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  2. #2
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need some Ajax technology to get what you need. Do you know anything about Ajax?

  3. #3
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to make sure we're understanding you correctly? are you wanting to change the image inside a div when a user fires some event (clicks a button or something)? if that's what you need, it's pretty simple.

  4. #4
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cbiti
    Just to make sure we're understanding you correctly? are you wanting to change the image inside a div when a user fires some event (clicks a button or something)? if that's what you need, it's pretty simple.
    That's EXACTLY what I need.

    I have ways of doing it...but I'd probably spend like 4 hours to get it to work.
    In the meantime, I've downloaded and implemented Lightbox, which was incredibly easy, and does exactly what I want it to.

    But I still want my own code to work. I've come this far with my own code. I've even programmed a little fading script which fades the main content encapsulted in a <div> with an ID value 'main' (as you can see in the code above).

    I you could tell me what your ideas are, I will most definitely appreciate them greatly!

    BTW : I'm using Smarty (not sure if that will help somehow)

    Thanks for the help guys.

    All the best,
    Antonie
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  5. #5
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Antonie, this is very simple.. all you need to do is assign an id to the <img> element that you want to change dynamically.
    that way, you can get access to the element by doing:
    var MyImg = document.getElementById('myid');

    at this point, you'll be able to change the src attribute

    MyImg.getAttribute('src') = 'newpath.gif';

    Hope this helps.

  6. #6
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cbiti
    Antonie, this is very simple.. all you need to do is assign an id to the <img> element that you want to change dynamically.
    that way, you can get access to the element by doing:
    var MyImg = document.getElementById('myid');

    at this point, you'll be able to change the src attribute

    MyImg.getAttribute('src') = 'newpath.gif';

    Hope this helps.
    Thanks alot.

    You'll see in the first post that the JavaScript already changes the 'src=""' of the <img> tag.

    Are you telling me that the new image will automatically show without any other action? Cause I can already change the source. Will the new image load the moment the 'src=""' is changed ?

    Best,
    Antonie
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  7. #7
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought it would. give it a try and if doesn't work, let me know. I'll show you another way.

  8. #8
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can also get a hold of your images by the image object
    document.images['myimg'].src = 'newpath.gif';

  9. #9
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is great...but I have another problem.

    I have a smarty var with an array of all the images. The problem is that I don't know whether there is a next or a previous image...and even if I did know...I wouldn't know what their filenames are.

    I'm trying to create a counter in my '.tpl' file to count 1 digit for each image and then assign that image filename to a var, but it's tricky.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  10. #10
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks cbiti, you've helped me alot.

    Are you familiar with Smarty ?

    I have the following code inside a loop named "images_1" :

    {assign var="img[images_1]" value=$product.img.type1[images_1].name}
    {$img[images_1]}
    ...and just before the loop, I have a {counter} that skips 1 digit everytime.

    See...all the images are dynamic data from my database and they are assigned to Smarty vars using PHP arrays.

    Man...I'm so confused.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  11. #11
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not familiar with Smarty at all. I'm not a PHP guy either
    but I can help you with JS if you still need more help.

  12. #12
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    I've decided to let it rest for now. The site needs to be done in several hours.
    I'll finish the site up with LightBox since it works 100%. I have two sets of different dynamic images, and I can easily assign them to the LightBox using my Smarty {section} loops.

    I'll need to finish up my own little script some time...

    Thanks alot for all your help.

    All the best,
    Antonie
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  13. #13
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if the images are being stored in a database. we're talking about a whole different deal here. You need Ajax to communicate with the backend stuff.

  14. #14
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cbiti
    if the images are being stored in a database. we're talking about a whole different deal here. You need Ajax to communicate with the backend stuff.
    Yeah...but I already have the PHP array and the Smarty vars ready. I just can't get it all to fit together. LightBox...here I come.

    Thanks again.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software


Bookmarks

Posting Permissions

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