The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

JQuery Codes.

5 posters

Go down

Solved JQuery Codes.

Post by udarsha45 April 10th 2012, 11:10 am

Hey,

Would you mind telling me how to install/add these stuff into my site? I've tried both and filed miserably.

1. http://web.enavu.com/tutorials/making-a-cool-spotlight-effect-with-jquery/
2. http://web.enavu.com/tutorials/make-a-custom-tab-interface-with-jquery/

Thank you.
udarsha45
udarsha45
Forumember

Male Posts : 626
Reputation : 9
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

Solved Re: JQuery Codes.

Post by T3CHNOCIDE April 10th 2012, 11:53 am

udarsha45 wrote:Hey,

Would you mind telling me how to install/add these stuff into my site? I've tried both and filed miserably.

1. http://web.enavu.com/tutorials/making-a-cool-spotlight-effect-with-jquery/
2. http://web.enavu.com/tutorials/make-a-custom-tab-interface-with-jquery/

Thank you.

Hey Udar,

Where abouts were you planning on putting this code, on an HTML page or on your Forum?

Thanks,
JQuery Codes. 2vigt8h
T3CHNOCIDE
T3CHNOCIDE
New Member

Male Posts : 11
Reputation : 1
Language : English, HTML, CSS, [Learning] Swedish.
Location : United Kingdom

Back to top Go down

Solved Re: JQuery Codes.

Post by Niko April 10th 2012, 6:54 pm

Hello,

First resource: Razz

Add this in a javascript code:
Code:
$(window).load(function(){ 
    var spotlight = { 
        // the opacity of the "transparent" images - change it if you like 
        opacity : 0.2, 
 
        /*the vars bellow are for width and height of the images so we can make
        the <li> same size */ 
        imgWidth : $('.spotlightWrapper ul li').find('img').width(), 
        imgHeight : $('.spotlightWrapper ul li').find('img').height() 
 
    }; 
 
    //set the width and height of the list items same as the images 
    $('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight }); 
 
    //when mouse over the list item... 
    $('.spotlightWrapper ul li').hover(function(){ 
 
        //...find the image inside of it and add active class to it and change opacity to 1 (no transparency) 
        $(this).find('img').addClass('active').css({ 'opacity' : 1}); 
 
        //get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array 
        $(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ; 
 
        //when mouse leave... 
    }, function(){ 
 
        //... find the image inside of the list item we just left and remove the active class 
        $(this).find('img').removeClass('active'); 
 
    }); 
 
    //when mouse leaves the unordered list... 
    $('.spotlightWrapper ul').bind('mouseleave',function(){ 
        //find the images and change the opacity to 1 (fully visible) 
        $(this).find('img').css('opacity', 1); 
    }); 
 
}); 

Add this in your CSS:
Code:
.spotlightWrapper ul { 
    list-style-type: none; /* remove the default style for list items (the circles) */ 
    margin:0px; /* remove default margin */ 
    padding:0px; /* remove default padding */ 

.spotlightWrapper ul li { 
    float:left; /* important: left float */ 

.spotlightWrapper ul li a img { 
    width:200px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */ 
    position:relative; /* so we can use top and left positioning */ 
    border:none; /* remove the default blue border */ 

.spotlightWrapper ul li a img.active { 
    border:4px solid white; /* choose whatever you like */ 
    z-index:1; /* show it on top of the other images (they have z-index 0) */ 
    left: -4px; /* same as border width but negative */ 
    top: -4px; /* same as border width but negative */ 

.clear { clear:both; } /* to clear the float after the last item */

And then you have to edit this part with your images (but leaving the href="#" as it is)
Code:
<!-- start spotlightWrapper div --> 
<div class='spotlightWrapper'> 
    <!-- start unordered list --> 
    <ul> 
        <li><a href='#'><img src='images/1.jpg' /></a></li> 
        <li><a href='#'><img src='images/2.jpg' /></a></li> 
        <li><a href='#'><img src='images/3.png' /></a></li> 
        <li><a href='#'><img src='images/4.jpg' /></a></li> 
        <li><a href='#'><img src='images/5.jpg' /></a></li> 
        <li><a href='#'><img src='images/6.png' /></a></li> 
        <li><a href='#'><img src='images/7.jpg' /></a></li> 
        <li><a href='#'><img src='images/8.jpg' /></a></li> 
        <li><a href='#'><img src='images/9.PNG' /></a></li> 
        <li><a href='#'><img src='images/10.jpg' /></a></li> 
        <li><a href='#'><img src='images/11.png' /></a></li> 
        <li><a href='#'><img src='images/12.png' /></a></li> 
        <li><a href='#'><img src='images/13.jpg' /></a></li> 
        <li><a href='#'><img src='images/14.png' /></a></li> 
        <li><a href='#'><img src='images/15.jpg' /></a></li> 
        <li><a href='#'><img src='images/16.jpg' /></a></li> 
        <div class='clear'></div> 
    </ul> 
    <!-- end unordered list --> 
</div> 
<!-- end spolightWrapper div --> 

If you want I can share you a demo... Mr. Green
Niko
Niko
Helper
Helper

Male Posts : 3243
Reputation : 251
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

Solved Re: JQuery Codes.

Post by levy April 10th 2012, 7:21 pm

Hello,Hello

For first:
Add this in one page HTM:
Code:
<!-- start spotlightWrapper div --> 
<div class='spotlightWrapper'> 
    <!-- start unordered list --> 
    <ul> 
        <li><a href='#'><img src='images/1.jpg' /></a></li> 
        <li><a href='#'><img src='images/2.jpg' /></a></li> 
        <li><a href='#'><img src='images/3.png' /></a></li> 
        <li><a href='#'><img src='images/4.jpg' /></a></li> 
        <li><a href='#'><img src='images/5.jpg' /></a></li> 
        <li><a href='#'><img src='images/6.png' /></a></li> 
        <li><a href='#'><img src='images/7.jpg' /></a></li> 
        <li><a href='#'><img src='images/8.jpg' /></a></li> 
        <li><a href='#'><img src='images/9.PNG' /></a></li> 
        <li><a href='#'><img src='images/10.jpg' /></a></li> 
        <li><a href='#'><img src='images/11.png' /></a></li> 
        <li><a href='#'><img src='images/12.png' /></a></li> 
        <li><a href='#'><img src='images/13.jpg' /></a></li> 
        <li><a href='#'><img src='images/14.png' /></a></li> 
        <li><a href='#'><img src='images/15.jpg' /></a></li> 
        <li><a href='#'><img src='images/16.jpg' /></a></li> 
        <div class='clear'></div> 
    </ul> 
    <!-- end unordered list --> 
</div> 
<!-- end spolightWrapper div -->

Before this Go in CSS and add this
Code:
view plaincopy to clipboardprint?
.spotlightWrapper ul { 
    list-style-type: none; /* remove the default style for list items (the circles) */ 
    margin:0px; /* remove default margin */ 
    padding:0px; /* remove default padding */ 

.spotlightWrapper ul li { 
    float:left; /* important: left float */ 

.spotlightWrapper ul li a img { 
    width:200px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */ 
    position:relative; /* so we can use top and left positioning */ 
    border:none; /* remove the default blue border */ 

.spotlightWrapper ul li a img.active { 
    border:4px solid white; /* choose whatever you like */ 
    z-index:1; /* show it on top of the other images (they have z-index 0) */ 
    left: -4px; /* same as border width but negative */ 
    top: -4px; /* same as border width but negative */ 

.clear { clear:both; } /* to clear the float after the last item */ 

Before this go in Jquery administration and add this code
Code:
$(window).load(function(){ 
    var spotlight = { 
        // the opacity of the "transparent" images - change it if you like 
        opacity : 0.2, 
 
        /*the vars bellow are for width and height of the images so we can make
        the <li> same size */ 
        imgWidth : $('.spotlightWrapper ul li').find('img').width(), 
        imgHeight : $('.spotlightWrapper ul li').find('img').height() 
 
    }; 
 
    //set the width and height of the list items same as the images 
    $('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight }); 
 
    //when mouse over the list item... 
    $('.spotlightWrapper ul li').hover(function(){ 
 
        //...find the image inside of it and add active class to it and change opacity to 1 (no transparency) 
        $(this).find('img').addClass('active').css({ 'opacity' : 1}); 
 
        //get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array 
        $(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ; 
 
        //when mouse leave... 
    }, function(){ 
 
        //... find the image inside of the list item we just left and remove the active class 
        $(this).find('img').removeClass('active'); 
 
    }); 
 
    //when mouse leaves the unordered list... 
    $('.spotlightWrapper ul').bind('mouseleave',function(){ 
        //find the images and change the opacity to 1 (fully visible) 
        $(this).find('img').css('opacity', 1); 
    }); 
 
}); 
levy
levy
Hyperactive

Male Posts : 2631
Reputation : 350
Language : English, Romanian
Location : Romania

https://portofolio.goodforum.net/

Back to top Go down

Solved Re: JQuery Codes.

Post by udarsha45 April 11th 2012, 7:10 am

T3CHNOCIDE wrote:
udarsha45 wrote:Hey,

Would you mind telling me how to install/add these stuff into my site? I've tried both and filed miserably.

1. http://web.enavu.com/tutorials/making-a-cool-spotlight-effect-with-jquery/
2. http://web.enavu.com/tutorials/make-a-custom-tab-interface-with-jquery/

Thank you.

Hey Udar,

Where abouts were you planning on putting this code, on an HTML page or on your Forum?

Thanks,
JQuery Codes. 2vigt8h

Yes, an HTML page.

And guys, I did everything but http://www.bleachstory.net/h96-jkjkj
udarsha45
udarsha45
Forumember

Male Posts : 626
Reputation : 9
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

Solved Re: JQuery Codes.

Post by levy April 11th 2012, 9:14 am

Hello,Hello
You need only to change
Code:
<!-- start spotlightWrapper div -->  <div class='spotlightWrapper'> 
    <!-- start unordered list --> 
    <ul> 
        <li><a href='#'><img src='images/1.jpg' /></a></li> 
        <li><a href='#'><img src='images/2.jpg' /></a></li> 
        <li><a href='#'><img src='images/3.png' /></a></li> 
        <li><a href='#'><img src='images/4.jpg' /></a></li> 
        <li><a href='#'><img src='images/5.jpg' /></a></li> 
        <li><a href='#'><img src='images/6.png' /></a></li> 
        <li><a href='#'><img src='images/7.jpg' /></a></li> 
        <li><a href='#'><img src='images/8.jpg' /></a></li> 
        <li><a href='#'><img src='images/9.PNG' /></a></li> 
        <li><a href='#'><img src='images/10.jpg' /></a></li> 
        <li><a href='#'><img src='images/11.png' /></a></li> 
        <li><a href='#'><img src='images/12.png' /></a></li> 
        <li><a href='#'><img src='images/13.jpg' /></a></li> 
        <li><a href='#'><img src='images/14.png' /></a></li> 
        <li><a href='#'><img src='images/15.jpg' /></a></li> 
        <li><a href='#'><img src='images/16.jpg' /></a></li> 
        <div class='clear'></div> 
    </ul> 
    <!-- end unordered list --> 
</div> 
<!-- end spolightWrapper div -->
images/1.png with your image.

Good Luck.
levy
levy
Hyperactive

Male Posts : 2631
Reputation : 350
Language : English, Romanian
Location : Romania

https://portofolio.goodforum.net/

Back to top Go down

Solved Re: JQuery Codes.

Post by kirk April 11th 2012, 10:47 am

you have to download the files, there is another jquery.js file in there you have to either import from another page, or do what i did and just upload it to a javascript host.

http://yourjavascript.com/

they will send you a code that looks like this.
Code:
<script type="text/javascript" src="http://yourjavascript.com/21318401151/jquery.js"></script>
Then you place that right under the <head> section like it is below.

Then upload your images and add them, If you do not want that many images you can remove some of the lines, or add more lines the same way if you want more. if you want to add links to your images they will go where the # is <a href='#'> or like this <a href='YOUR URL HERE'>



Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://yourjavascript.com/21318401151/jquery.js"></script>


   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   <title>index</title>
   <script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
   <script type="text/javascript" charset="utf-8">
      $(window).load(function(){
         var spotlight = {
             // the opacity of the "transparent" images - change it if you like
            opacity : 0.2,

            /*the vars bellow are for width and height of the images so we can make
            the <li> same size */
            imgWidth : $('.spotlightWrapper ul li').find('img').width(),
            imgHeight : $('.spotlightWrapper ul li').find('img').height()
            
         };
         
         //set the width and height of the list items same as the images
         $('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });
         
         //when mouse over the list item...
         $('.spotlightWrapper ul li').hover(function(){
            
            //...find the image inside of it and add active class to it and change opacity to 1 (no transparency)
            $(this).find('img').addClass('active').css({ 'opacity' : 1});
            
            //get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array
            $(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ;
            
            //when mouse leave...
         }, function(){
            
            //... find the image inside of the list item we just left and remove the active class
            $(this).find('img').removeClass('active');
            
         });
         
         //when mouse leaves the unordered list...
         $('.spotlightWrapper ul').bind('mouseleave',function(){
            //find the images and change the opacity to 1 (fully visible)
            $(this).find('img').css('opacity', 1);
         });
         
      });
   </script>




   <style type="text/css" media="screen">
      body { background:black; color:white; font-family: 'georgia' } /* not important */
      .spotlightWrapper ul {
         list-style-type: none; /* remove the default style for list items (the circles) */
         margin:0px; /* remove default margin */
         padding:0px; /* remove default padding */
      }
      .spotlightWrapper ul li {
         float:left; /* important: left float */
         position:relative; /* so we can use top and left positioning */
      }
      .spotlightWrapper ul li a img {
         width:200px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */
         position:relative; /* so we can use top and left positioning */
         border:none; /* remove the default blue border */
      }
      .spotlightWrapper ul li a img.active {
         border:4px solid white; /* choose whatever you like */
         z-index:1; /* show it on top of the other images (they have z-index 0) */
         left: -4px; /* same as border width but negative */
         top: -4px; /* same as border width but negative */
      }
      .clear { clear:both; } /* to clear the float after the last item */
   </style>
</head>
<body>

   <!-- start spotlightWrapper div -->  <div class='spotlightWrapper'>
    <!-- start unordered list -->
    <ul>
        <li><a href='#'><img src='images/1.jpg' /></a></li>
        <li><a href='#'><img src='images/2.jpg' /></a></li>
        <li><a href='#'><img src='images/3.png' /></a></li>
        <li><a href='#'><img src='images/4.jpg' /></a></li>
        <li><a href='#'><img src='images/5.jpg' /></a></li>
        <li><a href='#'><img src='images/6.png' /></a></li>
        <li><a href='#'><img src='images/7.jpg' /></a></li>
        <li><a href='#'><img src='images/8.jpg' /></a></li>
        <li><a href='#'><img src='images/9.PNG' /></a></li>
        <li><a href='#'><img src='images/10.jpg' /></a></li>
        <li><a href='#'><img src='images/11.png' /></a></li>
        <li><a href='#'><img src='images/12.png' /></a></li>
        <li><a href='#'><img src='images/13.jpg' /></a></li>
        <li><a href='#'><img src='images/14.png' /></a></li>
        <li><a href='#'><img src='images/15.jpg' /></a></li>
        <li><a href='#'><img src='images/16.jpg' /></a></li>
        <div class='clear'></div>
    </ul>
    <!-- end unordered list -->
</div>
<!-- end spolightWrapper div -->
</body>
</html>

Preview Link..
http://www.forumsuccessors.com/h94-jquery-test

Basically work with the whole code i have posted above, all i did to that is have the script that i uploaded so you can see it right under <head>

other then that you can see directions on how to adjust things, that you can latter remove or leave it's up to you. First jquery is in this.

Code:
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
   <title>index</title>
   <script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
   <script type="text/javascript" charset="utf-8">


The first jquery/java-script here,

</script>

Someone like LGforum can explain that better, But now that i am looking at it, I think if you want to import the other script in the download files . I think the url to the page you have the other script on would go where i have it marked in red.

<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>

Remember i just uploaded it.. and i am not 100% sure if thats where the url would go for the import or not, But i am sure someone can answer that for ya Smile

Oh and the css is in the style tags.

Code:
<style type="text/css" media="screen">
CSS HERE
</style>

Info added.


here is the other jquery.js code, i cant even fit it in a post here.
But it dose fit on a html page.. so the idea would be, you copy that code and place on your own page, then import the url from your page like i was saying above.

http://www.forumsuccessors.com/h96-j3
Or do what i did, download the files and upload the jquery.js file and add that way Smile
Note I will be removing that from my html page, i just put it there for now if you want to copy it
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: JQuery Codes.

Post by udarsha45 April 12th 2012, 7:47 am

Thanks a lot, guys! Very Happy Last question, how to add this ; http://web.enavu.com/tutorials/make-a-custom-tab-interface-with-jquery/
udarsha45
udarsha45
Forumember

Male Posts : 626
Reputation : 9
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

Solved Re: JQuery Codes.

Post by kirk April 12th 2012, 9:06 am

I'm not sure i would have to try /test it out over the weekend when i have some extra time, I usually just use a simple code like this, the more option has all them and even more i think.

preview

Code:
 <div class="addthis_toolbox addthis_default_style"> <a class="addthis_button_facebook"></a> <a class="addthis_button_email"></a> <a class="addthis_button_favorites"></a> <a class="addthis_button_print"></a> <span class="addthis_separator">|</span> <a href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4ac8de240c167ec5" class="addthis_button_expanded" style="text-decoration: none">More</a></div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4ac8de240c167ec5"></script>
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum