Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jun 2013
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Thumbs up Java script won't work

    Hello guys,
    i got myself a problem with my javascript i'll post the code to clear it up a little, basically it's the .view part the first . view divs in content-2 does work perfectly, but in content 3 i've placed another 6 divs but with another height,
    so i created another style for it : #content-3 .view with only 1 change :the height, i taught it should work perfectly because it's the same script on both nothing need to change in there i believe.

    i'm not very experienced in javascript but i think somehow it doesn't connect to my divs in content 3 somehow, i haven't posted to javascript in the link because i think it's an connection problem.

    if you guys think it's something in my script i'll send it over also,

    thank you,
    http://dabblet.com/gist/5830359

    edit: it does however work in my dreamweaver live function
    Last edited by DesignedbyLau; 06-21-2013 at 11:43 AM.

  • #2
    New Coder
    Join Date
    Jun 2013
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hope my explanation is clear if not just ask me

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    what is it supposed to do that it isn't doing?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by xelawho View Post
    what is it supposed to do that it isn't doing?
    And conversely, what is is not doing that it should be doing?

    What is supposed to be clicked to make the problem happen (specifically)?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    I would have *ASSUMED* that by .view you mean some element with a CLASS named "view".

    But I find no such class in any of that code.

    Nor do I find any .view in any of the CSS.

    Nor can I find any content-2 anywhere in the code.


    So I certainly have no ides what .view is supposed to be/mean. Or content-2. Or any part of your "explanation".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by xelawho
    what is it supposed to do that it isn't doing?
    Quote Originally Posted by jmrker View Post
    And conversely, what is is not doing that it should be doing?
    I would have thought the converse would be something like "what is it doing that it shouldn't be doing?"

    but anyway...

  • #7
    New Coder
    Join Date
    Jun 2013
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    By both views classes it has an hover effect of paper,
    but by the .view in div content they wont do it when hovering.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    I hate this dabblet application (and all similar ones) because you can’t just do a quick “view source” and analyze the code using built-in search functions of the browser, because it just shows all the code from the application (plus all JS and other errors this application generates and clutters up the console), not just the stuff you’re testing. Also, it’s putting a lot more strain on the browser to process all the JS that makes the site dynamic.

    If you could post a link to a plain version of your problem showing only your code (or even post the plain source code here) that would help (me, at least) tremendously.

  • #9
    New Coder
    Join Date
    Jun 2013
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    You want to send the total code of where might be the problem?
    because i think it's in my html.

    and i know dabblet is a little annoying buy you could also simply copy the code from there and paste it in program.

    Javascript:
    Code:
    ( function( $ ) {
    	
    	$.fn.hoverfold = function( args ) {
    
    		this.each( function() {
    		
    			$( this ).children( '.view' ).each( function() {
    			
    				var $item 	= $( this ),
    					img		= $item.children( 'img' ).attr( 'src' ),
    					struct	= '<div class="slice s1">';
    						struct	+='<div class="slice s2">';
    							struct	+='<div class="slice s3">';
    								struct	+='<div class="slice s4">';
    									struct	+='<div class="slice s5">';
    									struct	+='</div>';
    								struct	+='</div>';
    							struct	+='</div>';
    						struct	+='</div>';
    					struct	+='</div>';
    					
    				var $struct = $( struct );
    				
    				$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
    				
    			} );
    			
    		});
    
    	};
    
    } )( jQuery );

  • #10
    New Coder
    Join Date
    Jun 2013
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Noone can see some connection problem?
    it's 2 divs that are connected to 1 javascript shouldn't be a problem right?

  • #11
    New Coder
    Join Date
    Jun 2013
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Update:
    i just copied the divs in content-2 to content-3 so the exact same class and div is used, it's only in another container. somehow it doesn't seem to work, as you can see in the JS it applies on ".view" class so i really can't see the problem. only thing i can imagine is something in the HTML that stops the JS from working in content-3 div.

    Help would be really much appreciated been struggling with it for few days now.

    if i need to provide more of my scripts just tell me but not wanna unnecessary scripts.
    html:
    Code:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>LMDesign - Logo's</title>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
            <meta name="description" content="3D Thumbnail Hover Effects" />
            <meta name="keywords" content="3d, 3dtransform, hover, effect, thumbnail, overlay, curved, folded" />
            <meta name="author" content="Codrops" />
            <link rel="shortcut icon" href="../favicon.ico"> 
            <link rel="stylesheet" type="text/css" href="css/Demo-logo.css" />
            <link rel="stylesheet" type="text/css" href="css/style_common.css" />
            <link rel="stylesheet" type="text/css" href="css/style1.css" />
            <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css' />
            
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="smoothscroll.js"></script> 
    
    <script type="text/javascript">
    var menuOffset = $('#menu')[0].offsetTop;
    
    $(document).bind('ready scroll', function() {
        var docScroll = $(document).scrollTop();
    
        if (docScroll >= menuOffset) {
            $('#menu').addClass('fixed');
        } else {
            $('#menu').removeClass('fixed');            
        }
    
    });
    </script>
            <script type="text/javascript" src="js/modernizr.custom.69142.js"></script> 
      
     
        
        </head>
        <body>
       
    <div class="container">
      <div id="content-1">
         
    	<span id="con1-text">
    					<section class="rw-wrapper">
    				<h2 class="rw-sentence">
    					<span>Ik ben een interactief ontwerper uit Zeewolde</span>
    					<br />
    					<span>Het is mijn doel om uw boodschap te realizeren</span>
    					<br />
    					<span>door middel van </span>
    					<div class="rw-words rw-words-1">
    						<span>creativiteit</span>
    						<span>kleur</span>
    						<span>stijl</span>
    						<span>orginaliteit</span>
    						<span>laatste techniek</span>
    					</div>
    				</h2>
    			</section>
    	</span>
           
                </div>
    		  
              
                <div id="content-2">
                		
                	<span id="title-logo">Logo design</span>
                <div id="grid" class="logo">
    		        <div class="view">
    		          <div class="view-back"> <a href="Info_dasselaar.html">→</a> </div>
    		          <img src="images/index_logos_10.jpg" /> </div>
    		        <div class="view">
    		          <div class="view-back"> <a href="info-2times.html">→</a> </div>
    		          <img src="images/index_logos_12.jpg" /> </div>
    		        <div class="view">
    		          <div class="view-back"> <a href="Info_gastouders.html">→</a> </div>
    		          <img src="images/index_logos_14.jpg" /> </div>
    		        <div class="view">
    		          <div class="view-back"> <a href="Info_gastouders.html">→</a> </div>
    		          <img src="images/index_logos_14.jpg" /> </div>
    		        <div class="view">
    		          <div class="view-back"> <a href="Info_gastouders.html">→</a> </div>
    		          <img src="images/index_logos_14.jpg" /> </div>
    		        <div class="view">
    		          <div class="view-back"> <a href="Info_gastouders.html">→</a> </div>
    		          <img src="images/index_logos_14.jpg" /> 
                      </div>
    				</div> 
                    </div>
                    
                    
    		<div id="content-3">
            	<span id="title-logo">Logo design</span>
                <div id="grid" class="logo">
    		        <div class="view">
    		          <div class="view-back"> <a href="Info_dasselaar.html">→</a> </div>
    		          <img src="images/index_logos_10.jpg" /> </div>
    		        <div class="view">
    		          <div class="view-back"> <a href="info-2times.html">→</a> </div>
    		          <img src="images/index_logos_12.jpg" /> </div>
    		        <div class="view">
    		          <div class="view-back"> <a href="Info_gastouders.html">→</a> </div>
    		          <img src="images/index_logos_14.jpg" /> </div>
    		        <div class="view">
    		          <div class="view-back"> <a href="Info_gastouders.html">→</a> </div>
    		          <img src="images/index_logos_14.jpg" /> </div>
    		        <div class="view">
    		          <div class="view-back"> <a href="Info_gastouders.html">→</a> </div>
    		          <img src="images/index_logos_14.jpg" /> </div>
    		        <div class="view">
    		          <div class="view-back"> <a href="Info_gastouders.html">→</a> </div>
    		          <img src="images/index_logos_14.jpg" /> 
                      </div>
                       </div>
           
           </div>
          			
      
    		
               <div id="header">
               <div id="navigation">
               					
              			
                              
             	  <ul>
                  				 <img id="header-logo" src="logo.png" width="30" height="30">
    					<li><a href="#content-1">home</a></li>
    					<li><a href="#content-2">logo's</a></li>
    					<li><a href="#content-3">posters</a></li>
    					<li><a href="#content3">contact</a></li>
    				</ul>
                 </div>
    		
          	 </div> 
    </div>
    		
    		<script type="text/javascript">	
    			$(document).ready(function(){
    	$('a[href^="#"]').on('click',function (e) {
    	    e.preventDefault();
    	    var target = this.hash,
    	    $target = $(target);
    	    $('html, body').stop().animate({
    	        'scrollTop': $target.offset().top
    	    }, 900, 'swing', function () {
    	        window.location.hash = target;
    	    });
    	});
    });
    </script>
    <script type="text/javascript">	
    			
    			Modernizr.load({
    				test: Modernizr.csstransforms3d && Modernizr.csstransitions,
    				yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'],
    				nope: 'css/fallback.css',
    				callback : function( url, result, key ) {
    						
    					if( url === 'js/jquery.hoverfold.js' ) {
    				$( '#grid' ).hoverfold();
    					}
    
    				}
    			});
    				
    		</script>
        </body>
    </html>
    JavaScript:
    Code:
    ( function( $ ) {
    	
    	$.fn.hoverfold = function( args ) {
    
    		this.each( function() {
    		
    			$( this ).children( '.view' ).each( function() {
    			
    				var $item 	= $( this ),
    					img		= $item.children( 'img' ).attr( 'src' ),
    					struct	= '<div class="slice s1">';
    						struct	+='<div class="slice s2">';
    							struct	+='<div class="slice s3">';
    								struct	+='<div class="slice s4">';
    									struct	+='<div class="slice s5">';
    									struct	+='</div>';
    								struct	+='</div>';
    							struct	+='</div>';
    						struct	+='</div>';
    					struct	+='</div>';
    					
    				var $struct = $( struct );
    				
    				$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
    				
    			} );
    			
    		});
    
    	};
    
    } )( jQuery );


  •  

    Posting Permissions

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