My second Tutorial here on creators. Here is a link to the first Tutorial I created. If you start to get lost uploading JS files and images to your website, visit my first Tutorial and you should be able to make it through this one.
I wanted to display all of my forum catgories on the front page of my website and have it look sharp. I can't do that with text only links and no animation. Below is the result of my hard work and the third party Java Script provided by Java Script Kit and the tutorial page.
View it live on My Ning powered website.
First is the HTML:
The HTML code below goes in a text box, or custom page. I am not sure if it will work in a forum discussion or blog post. You can give it a go and let us all know if it worked.
<div class="imagecontainers" data-overlayid="tzn-info"><img src="yourimageurl.jpg" /></div>
<div id="tzn-info">
<p><a style="color:#ffffff;" href="http://link-to-content.com">Test that will appear in the image overlay</a></p>
</div>
I added color style to the a href to override my website's link color. If you need your link color to be different, change #ffffff to your Hex Color code.
If you plan on using more than one image like I did, then you need to change the div id's that include the different image. For example, the div id right now is tzn-info in two spots. Change it for the next image block to something like tzn2-info.
Feel free to visit my website and view my website source code for a more in depth view of the HTML and CSS code. Please do not hotlink to any of my images and if you use my HTML block as I did, please give me a link back to my site for credit where credit is due.
Second is the CSS:
The code below goes in your advanced CSS area:
/*Side-Ways-Boxes*/
.imagecontainers {
display:block-inline;
width: 227px;
height: 104px;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
margin-left: -8px;
top: 5px;
}
div#bg-info {background: black;padding: 2px 0px 0px 10px;color: white;}
The top CSS code has height and width that you will need to modify if you are not using images that are the same size as the ones I used. You will have to make changes to the CSS to accommodate your image size. Firebug or an equivalent devloper tool will be needed.
The Bottom line of CSS code controls the div overlay color, text color and padding of the text.
Last is the Java Script:
You will need to copy and paste the Java Script from here into Notepad or Textpad and save to your computer as overlaybox.js. Upload that file to a text box and paste it in place of yourwebsiteurl.com/overlaybox.js in the code below.
Having a hard time working with this? Visit my first Tutorial and you should be able to make it through this one.
The code below goes in the custom code box.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="yourwebsiteurl.com/overlaybox.js">
/***********************************************
* DIV Content Overlay script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
<script>
jQuery(function($){ //on document.ready
$('#info').overlaycontent({ //initialize overlay on single DIV with id="info"
speed:500, //duration of animation in milliseconds
dir:'up' //supports 'up', 'down', 'left', or 'right'
})
$('div.imagecontainers').overlaycontent({ //initialize overlay on DIVs with class="imagecontainers"
speed:300,
dir:'right',
opacity:0.7 //opacity: 0 to 1
})
})
</script>
You see the opacity setting? The lower the number the more transparent it will be. You see the speed setting (300)? The higher the number, the slower the overlay will slide out.
Last words:
If this does not go off without a hitch, please don't get upset. I may have left something out. Reply below if you need help.
Don't forget to share with us all how you used this tip and any modifications you may have made to make it work on your Ning powered website.
**Please remember that this Java Script code is copyright by a third party. Sharing this code with others and not giving credit back to the creator of the Java Script and myself for coding it to work with a Ning powered website, is a no no and will hurt my feelings. Enjoy!
Replies
That is some beautiful work? Is that a Ning site?
Thank you, yes it is a Ning website.
I realized what a stupid question after the fact, but I was so taken aback by the awesomeness of your site. LOL I can't believe I'm the only one to have responded. When I have time later, i will invite friends to this discussion and your other discussion as well.
Thank you for the support.
It would be cool to see other creators use this tutorial and then showcase their results. I am free to help if anyone has any problems getting something like this to work on their Ning Powered Website.
I am sure the are many different ways a script like this could be used. Maybe someone will experiment and share the result.
link to last java script says link in forbiden
Hello Planet,
Can you provide a screen shot?