SamP
Members
-
Joined
-
Last visited
-
Hi Guys, I've got a seamingly simple question, but I can't seem to figure it out. Every time a user scrolls the scrollTop changes. I want to subtract the old from the new value of the scrollTop. But how do i store the old value, so i can subtract it from the new value after the user stops scrolling? There must be an easy way. $(function(){ $(window).scroll(function(){ var curTop = $(window).scrollTop(); var newTop = (curTop - curTop); console.log(newTop); }); }); This obviously doesn't work. You guys have any idea?
-
He guys, I just figured it out. All I had to do was add: e.preventDefault(); Still don't understand exactly why it was going all crazy?
-
It works untill we go green again. After three clicks, it all goes wrong http://abovetherim.nl/slide.html - This is the page i'm using. It's a proof of concept for a little application i'm building.
-
Hi everyone, I've got sort of a strange problem. I'm trying to make a 300px width window (.container with overflow: hidden;), which shows the selected colored block. Whenever a link inside a colored block is clicked, the anchor should slide a colored block, which is outside the container because of absolute positioning inside the .container. When overflow:hidden is turned off, everything seems to be working good. But whenever it is turned on, the positions of the absolute blocks seem to be going all crazy? With the code it all should become a little be more clear. An example an be found at: http://abovetherim.nl/slide.html (this is WITH overflow: hidden). Javascript (jQuery) <script type="text/javascript"> $(document).ready(function(){ $('.title').click(function(){ var targetClick = $(this).attr('href'); var curEl = $(this).parent(); if ($(targetClick).css('left') === '0px') { $(curEl).animate({left: '300px'}, 'slow'); $(targetClick).animate({left: '0px'}, 'slow'); } if ($(targetClick).css('left') === '300px') { $(curEl).animate({left: '-300px'}, 'slow'); $(targetClick).animate({left: '0px'}, 'slow'); } if ($(targetClick).css('left') === '-300px') { $(curEl).animate({left: '300px'}, 'slow'); $(targetClick).animate({left: '0px'}, 'slow'); } }); //end click }); //end script </script> CSS .container{ position: relative; width: 300px; height: 300px; margin: 0 auto; overflow: hidden; } .screen{ position: absolute; left:0; top:0; width: 300px; height: 300px; z-index: 0; } .green{background: green;} .red{background: red;} .yellow{background: yellow;} HTML <div class="container"> <article class="screen red" id="red"> <a href="#green" class="title">become green!</a> </article> <article class="screen yellow" id="yellow"> <a href="#red" class="title">become red!</a> </article> <article class="screen green" id="green"> <a href="#yellow" class="title">become yellow!</a> </article> </div> So why doesn't this work. I am obviously doing something wrong?
-
He guys, This is probably a very dumb question, but I can't seem to find the answer, so this is my last resort. I'm trying to place a Facebook Like button on my website. The only thing I want, is that when users click the like button, a message on their newsfeed appears with something like "Sam just liked this website..". The thing is.. I thought this happened automatically. ("The Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your website." - http://developers.facebook.com/docs/reference/plugins/like/) But when I click my iframe button, nothing appears! What am I doing wrong? I have placed the following code in the <head> <meta property="og:title" content="title" /> <meta property="og:type" content="athlete" /> <meta property="og:url" content="mywebsite.nl" /> <meta property="og:image" content="image.png" /> <meta property="og:site_name" content="sitename" /> <meta property="fb:admins" content="myfbaccountid" /> <meta property="og:description" content="description of my website"/> My iframe: <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.mywebsite.nl" scrolling="no" frameborder="0" style="border:none; width:300px; height:80px"></iframe>
-
What do you mean exactly? Everyone: thanks! Keep 'em coming!
-
He guys, I recently accepted my first assignment for a friend and i need some feedback. I made the following website: http://www.abovetherim.nl/jeroencortello/ Dont mind the code, it's still a mess. But something's missing. On top. I thought an awesome-great-super jquery sliding header would do the trick, but it doesn't really fit. it's too much. Any ideas? Or do you think it doesn't need something on top and something else should be changed? Please tell me what you think and make some suggestions! I practically have no experience in doing this, so i could use some tips from badass webdesigners like you guys. Thanks! Sam
-
-
You are the boss my friend. I changed it a little bit to what I exactly had in mind. The most important thing I learned here, is that i finally know how i can find elements in ($this). That was something I struggled with for a longer period of time. Thanks a bunch man! HTML <ul id="menu"> <li> <div class="red"></div> <div class="content">home</div> <div class="bg"></div> </li> <li> <div class="red"></div> <div class="bg"></div> <div class="content">agenda</div> </li> </ul> CSS ul{list-style: none;} li{ font-family: "verdana"; font-size: 11px; position: relative; overflow: hidden; float: left; clear: both; color: white; } li div { height: 25px; line-height: 25px; } li .bg { border-left: 200px solid red; /**/ background: black; position: absolute; left: -200; top: 0; z-index: -1; width: 200px; } li .content{ width: 200px; } li .red{ float: left; width: 25px; background:red; z-index: -1; } jQuery $(document).ready(function(){ $('#menu li').hover(function() { $(this).find('.bg').animate({left: '0'}); }, function (){ $(this).find('.bg').animate({left: '-200'}); }); });
-
The jquery is posted, and css too. It's just not showing the .red div that's supposed to be in front of the .content div. on the mouseenter: the red div is supposed to grow to 130px and at the same time .content is supposed to reduce to 0px. now i want to the text in span .menutitle (that is located in .content) to be transferred/copied/swapped or whatever to .red and removed/emptied/detached/hidden from .content. explaining this in words is kinda sucky, haha. its really simple actually, i just cant seem to get it done. CSS: .menuitems ul{list-style: none;} .menuitems li{font-family: "verdana"; font-size: 11px;} .menuitems div{height: 25px; float: left;} .red{background: red; width: 30px;} .content{background: black; color: white; width: 100px;}
-
He guys, I just can't seem to figure out a problem. Maybe you can help. When hovering over a li in #menu i want .red change width and .content change width. This all works. The only problem i have now is that i want to swap the text from span class (.menutitle) from .content to .red. Am i completely wrong here? Or is it just a simple problem? <ul id="menu"> <li> <div class="red"></div> <div class="content"><span class="menutitle">home</span></div> </li> <li> <div class="red"></div> <div class="content"><span class="menutitle">agenda</span></div> </li> </ul> $('#menu li').mouseenter(function(){ $(this).children('div:eq(1)') .animate({ width: '0px' }) $(this).children('div:eq(0)') .animate({ width: '130px', }) }); $('#menu li').mouseleave(function(){ $(this).children('div:eq(1)') .animate({ width: '100px' }) $(this).children('div:eq(0)') .animate({ width: '30px', }) Thanks!
-
-
Oh my god.. just a few words, hahaha. Thanks alot, that was exactly what i was looking for! Do you perhaps know if there's any way to make the search not case-sensitive? Edit: found it var $lc = $search.toLowerCase(); Thanks alot markeh!
-
He guys, I've been working this all day, but just can't figure it out. It's pretty easy actually. I have an input type, where I want to type the word that should filter my results. I only want to show items that contain the word that's begin searched. In the example below i want to filter var $desc on the word thats being typed in #fld. So when the user typs "car", I only want to show <description></description> items from the XML feed which contain the word "car". <input type="text" id="fld" /> <br /><input type="submit" value="zoek" id="btn" /> <div id="page-wrap"> </div> $(document).ready(function(){ $('#btn').click(function(){ $.ajax({ type: "GET", url: "feed.xml", dataType: "xml", success: function(xml) { $(xml).find('item').each(function(){ var $id = $(this).attr('id'); var $title = $(this).find('title').text(); var $url = $(this).find('link').text(); var $desc = $(this).find('description').text(); $('<div class="items" id="link_'+$id+'"></div>').html('<a href="'+$url+'">'+$title+'</a><p>'+$desc+'</p>').appendTo('#page-wrap'); }); } }); }); }); Anyone?? Thanks in advance guys.
-
I can't see the problem either.
