Search the Community

Right now I have a mobile dropdown that works fine. The only issue I have is that when viewing it on my smartphone, the dropdown gets cut off at the bottom and I am unable to scroll it down to rest of it. Is there a way to fix it so that It's scrollable? Here's my js code of the dropdown. $(document).ready(function() { $(".nav-mobile li a").each(function() { if ($(this).next().length > 0) { $(this).addClass("parent-arrow"); } }) $(".toggle-mobile-menu").click(function(e) { e.preventDefault(); $(this).toggleClass("active-mobile"); $(".nav-mobile").toggle(); }); adjustMenu(); }); $(window).bind('resize orientationchange', function() { ww = document.body.clientWidth; adjustMenu(); }); var adjustMenu = function() { var ww = document.body.clientWidth; if (ww <= 850) { $(".toggle-mobile-menu").css("display", "block"); if (!$(".toggle-mobile-menu").hasClass("active-mobile")) { $(".nav-mobile").hide(); } else { $(".nav-mobile").show(); } $(".nav-mobile li").unbind('mouseenter mouseleave'); $(".nav-mobile li a.parent-arrow").unbind('click').bind('click', function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } else if (ww > 850) { $(".toggle-mobile-menu").css("display", "none"); $(".nav-mobile").hide(); $(".nav-mobile li").removeClass("hover"); $(".nav-mobile li a").unbind('click'); $(".nav-mobile li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { // must be attached to li so that mouseleave is not triggered when hover over submenu $(this).toggleClass('hover'); }); } }

I have a working autocomplete which connects to my database using ajax. I am trying to include a function where the user can scroll through the results list using the up/down arrow keys. All of the suggestions I found in google basically broke my autocomplete and yes I've installed the latest Jquery. Also, for some reason the user has to click the upper half of the search result in order for the data to display otherwise it won't register for some reason any ideas about that? Any help would be greatly appreciated. Thanks <script type="text/javascript"> $(function(){ $(".search").keyup(function() { var searchid = $(this).val(); var dataString = 'search='+ searchid; if(searchid!='') { $.ajax({ type: "POST", url: "search.php", data: dataString, cache: false, success: function(html) { $("#result").html(html).show(); } }); }return false; }); jQuery("#result").live("click",function(e){ var $clicked = $(e.target); var $name = $clicked.find('.name').html(); var decoded = $("<div/>").html($name).text(); $('#searchid').val(decoded); var yourLinkHref= $(this).attr('href'); window.location = "mainpage.php?TopicName=" + $name; }); jQuery(document).live("click", function(e) { var $clicked = $(e.target); if (! $clicked.hasClass("search")){ jQuery("#result").fadeOut(); } }); $('#searchid').click(function(){ jQuery("#result").fadeIn(); }); }); </script>

Hi there, I am needing a bit of advice. I am currently working on a new site, and I have my links at the top in a fixed header, and the rest of my content throughout the same page. http://sr.bluepigeon.com have a look it will make more sence then me describing it. Now i have worked a little bit with jQuery but do not know all the ins and outs of it, which is why I am a bit stuck. Now when I click one of the links on the page, I want the page to scroll down to that div and display it in the center of the screen. Now the code I am using (see below) obviously works on my laptops screen size but won't be as 'perfect' and centered on other sized screens. If i user the following code without each of the offsets then it will scroll to the correct div, but it will be displayed on the top of the page and not centered in the middle. What I am wanting to know, is, is it possible to make it scroll to a div and then center the div in the middle of the screen? If not how could i get as close as possible to this? $(document).ready(function(){ $("#blogl").click(function() { $('html, body').animate({ scrollTop: $("#blog").offset().top }, 2000); }); $("#racel").click(function() { $('html, body').animate({ scrollTop: $("#race").offset().top }, 2000); }); $("#aboutl").click(function() { $('html, body').animate({ scrollTop: $("#about").offset().top +700 }, 2000); }); $("#srl").click(function() { $('html, body').animate({ scrollTop: $("#sr").offset().top +100 }, 2000); }); $("#donatel").click(function() { $('html, body').animate({ scrollTop: $("#donate").offset().top }, 2000); }); }); Thanks for your help again Eric

The current infinite scroll script I have works great by it self. The masonry script I have works as well by itself. However when I combine them both, they won't work. I am wondering if there is an infinite scroll script that would work with Masonry?

I am building admin control panel for a website. The admin cp has 3 columns(div): 1st column/div - left menu items (left column) 2nd column/div - content display area (which is in center) 3rd column/div - right menu items (right column) This is how it works; when a link is clicked from 1st column/div, the page linked will be opened in the 2nd column/div and in the similar way when a link is clicked from 3rd column/div, the page linked will be opened in the 2nd column/div. I used iframe in 2nd column/div to achieve this i.e, open links in the same page without refreshing the page. The problem I have: When the page opened in 2nd column/div has the height greater than the height mentioned in the iframe, scroll bar appears inside the div. What I want: I want to display the linked page either from 1st column/div or 3rd column/div in 2nd column/div with its full height without the scroll bar appearing inside the div. The browser window (all columns combined) should get the scroll bar instead, using which I shall be able to scroll down. The left and right columns/div should go upwards/downwards when I use the scroll bar displaying the page linked/opened totally in 2nd column/div. ****In simple I want a facebook like design which should have menu items on either side of the browser window, clicking the links should open the page linked in center and if the linked page has more data that cannot be displayed in that div, it should expand the center div downwards to display the data (not dynamically, statically).**** Please get me this solved or suggest me another way to achieve this. Thanks in advance. admin.php styles.css view.php

The HTML is below. I'm struggling to find an easy jQuery way to scroll to a given row (classes abc, def, xyz). I've tried various versions of scrollTop, offset, offsetParent, and more. All to no avail. The cart_item_wrapper is 150px tall, and it exists to allow the "cart_items_table" to show its items in a scrollable manner. What is the best way to scroll to a div in a div? <div id="cart_item_wrapper"> <table id="cart_items_table"> <tbody> <tr class="abc" style=" "> <td class="icon_col"></td> </tr> <tr class="def"> <td class="icon_col"></td> </tr> <tr class=”xyz”> <td class="icon_col"></td> </tr> <tr> <td class="icon_col"></td> </tr> <tr> <td class="icon_col"></td> </tr> </tbody> </table> </div>

I have been trying to look up how to make a div that has a side scroll ability but with out the the ugly normal overflow:scroll attribute. I have seen it used plenty of times but its like nobody knows what i am talking about. Just a div that would inside or on either sides have a right, left ability to scroll. Could anyone help me out? I'm not even sure what language would support this kind of thing. I'm thinking jQuery but could find anything on the subject. Any help would be so appreciated.

Hi guys, I have added simple CSS3 opacity animation on scroll down and everything works. Now I am trying to add cool bounce CSS3 effect and it works but disappears after the effect is completed. The effect is applyed to the 'footer' with "addClass('animated bounceInDown');". I don't think that is CSS problem as the animation should just stop playing when its done. Any ideas? <script type="text/javascript"> $(document).ready(function() { /* Every time the window is scrolled ... */ $(window).scroll( function(){ /* Check the location of each desired element */ $('.hideme','footer').each( function(i){ var bottom_of_object = $(this).position().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); /* If the object is completely visible in the window, fade it it */ if( bottom_of_window > bottom_of_object ){ $(this).animate({'opacity':'1'},500); $(this).addClass('animated bounceInDown'); } }); $('img').load(function() { $(this).addClass('active'); }); }); }); </script>

I'm trying to $_POST a variable or two back to the same page, so that I can scroll through different years of entries in my database... I'm not having any luck with it so far, is anyone able to tell me where I've gone wrong? I've tried a few different techniques, but my trouble boils down to being unable to post to the same page, initially I tried <a href="">'s with the variables on the end, but following documentation online its become a more complicated mess with the same effect... adding in $_SERVER['PHP_SELF'], a <form> and such... <?php $up=$_POST['up']; $dn=$_POST['down']; $year = date("Y"); if(up){$year++;} if(dn){$year--;} ?> <h2 style="font-family: ErasDemi;">Log for <?php echo $year; ?></h2> <form action=<?php echo $_SERVER['PHP_SELF'] ?> method='post'> <input type='submit' name='dn' value='Last Year'/> <input type='submit' name='up' value='Next Year'/> </form> Any help would be much appreciated.

Hi, I want to scrolling down all posts in homepage. I have installed this plugin http://wordpress.org/extend/plugins/infinite-scroll/. But i could't configure the CSS settings in the infinite-scroll setting for my theme. Here is my site http://www.adventureseeker.org/ Need help. Thanks in advance. Regards.

Hello guys, I'm building a website for tablets and i want o add the ability for the user to swipe down to another div. I've found some jquery plugins for this but only for left/right, and from some blogs that jquery doesn't support this ? Is that true and how can i overcome this ? I don't know javascript/jquery and i'd like some help.