1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with TinyBox JavaScript Popup Box

Discussion in 'JavaScript' started by LexisHost, Jan 13, 2011.

0
  1. #1
    LexisHost, Jan 13, 2011 IP
  2. shofstetter

    shofstetter Well-Known Member

    Messages:
    178
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    120
    #2
    ok upload the file tinybox.js to /

    in the page you would like to use tinybox on in the <head>here</head> section

    insert the following:
    
<script type="text/javascript" src="/tinybox.js"></script>
    Code (markup):
    then to load a page into it, you can create a function to call it:
    
<script type="text/javascript">
do_tinybox(show){// show = true or false
/*  TINY.box.show(src = url,show/hide = true / false, width , height ,animate = true / false, delay how long to animate);  */
TINY.box.show('yourpage.html',show,300,150,true,500);

}
</script>
    Code (markup):

    you can then call the function using the onclick= attribute of you html elements:
    
<img src="showme_button.gif" onclick="open_tineybox(true);">
<img src="hideme_button.gif" onclick="open_tineybox(false);">
    Code (markup):

    hope this helps.
     
    shofstetter, Jan 14, 2011 IP
  3. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #3
    In addition to what shofstetter posted, you also need to upload the Tinybox stylesheet (style.css) and the images folder.
    You may need to rename the stylesheet to tinybox.css if you already have style.css.
    Then you have to add a link to the stylesheet in the head section.
    
<link rel="stylesheet" type="text/css" href="tidybox.css" />
    Code (markup):
     
    Cash Nebula, Jan 14, 2011 IP
  4. LexisHost

    LexisHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thank you very much for the little tutorial shofstetter, and Cash Nebula thanks for the tip :) my site does come with css style sheet I wouldn't wanna overwrite it :p

    Thanks a lot people.
     
    LexisHost, Jan 14, 2011 IP
  5. LexisHost

    LexisHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Okay, I just tried to follow up the little tutorial, and I couldn't get it to work let's say I have a plain page and I wanna make a link with the phrase "click here" so that when someone click there the tinybox will popup with the content in it.

    How do I do this?? I am no expert how so ever on this.
     
    LexisHost, Jan 14, 2011 IP
  6. LexisHost

    LexisHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    where do I put this code?

    <script type="text/javascript">
do_tinybox(show){// show = true or false
/*  TINY.box.show(src = url,show/hide = true / false, width , height ,animate = true / false, delay how long to animate);  */
TINY.box.show('yourpage.html',show,300,150,true,500);

}
</script>
    Code (markup):
    And what is this code below for? How do I use it?

    <img src="showme_button.gif" onclick="open_tineybox(true);">
<img src="hideme_button.gif" onclick="open_tineybox(false);">
    Code (markup):
     
    LexisHost, Jan 14, 2011 IP
  7. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Save this as a page and try it out. It's very basic but it's a start, and you can improve it once you know it works.
    
<html>
<head>
<title>TinyBox Demo</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="tinybox.js"></script>
<link rel="stylesheet" type="text/css" href="tidybox.css" />
</head>
<body>
<a href="#" onclick="TINY.box.show('Hello World',0,200,200,1);">Show Box</a>
</body>
</html>
    Code (markup):
     
    Cash Nebula, Jan 14, 2011 IP
  8. LexisHost

    LexisHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    How do I insert a page instead of "Hello World"?
     
    LexisHost, Jan 14, 2011 IP
  9. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Need to make it use AJAX by changing the first number to 1
    <a href="#" onclick="TINY.box.show('page.html',1,200,200,1);">Show Page</a>

    But I could only get it to work on a server. If I load it from a folder, all I get is the spinning loading image.
    I think that has something to do with AJAX, but I don't know enough to be sure.
     
    Cash Nebula, Jan 14, 2011 IP
  10. LexisHost

    LexisHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I inserted the code you just gave me and it seemed to work for me, but for some reason the page doesn't have a scroller, you can view the page by going to the following link

    http://lexishost.atwebpages.com/dummy.html
     
    LexisHost, Jan 15, 2011 IP
  11. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I think Tinybox has been abandoned because the last update was in November 2009 and the author's last comment was in May 2009.
    There are many complaints about the page height problem, which is not fixed by using zero for auto height.

    I just found out that Hostgator's Tinybox is different to the original, so it looks like they modified it to fix that problem. It works when I use these instead of the originals.
    
http://www.hostgator.com/shared/css/tinybox.css
http://www.hostgator.com/shared/js/tinybox.js
    Code (markup):
     
    Cash Nebula, Jan 15, 2011 IP
  12. LexisHost

    LexisHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Yeah I got it to work, using the modified version from hostgator provided by you, thank you :)
     
    LexisHost, Jan 15, 2011 IP