|
JavaScript - Scroll Function Without Scrollbar Showing
Just want to say thanks in advance for all of those who can help me out with this.
Here is the page I'm working on: http://jackradetsky.com/recent_work.html As you will see there are only two pictures on there now. I want the left table cell to have an up arrow and a down arrow below those pictures where the user can scroll (down and up) and see other pictures, which when clicked on will show a larger image to the right. It's setup now as you will see for the larger image to appear to the right. It's just not setup for this scroll function where the user can click on an up arrow or down arrow to make the users see the other pictures in the table cell. Also this section should not have a scrollbar show up when the pictures are being scrolled down to see. I'm not sure on how to proceed with this. Thank you for the help in advance. I appreciate it. -Brian Similar TutorialsI made this webpage. It runs with a simple javascript function that changes the content in the window when you click on the menu buttons. the only problem is there are no vertical scroll bars when viewed in any browser. There seems to be a place for them but no actual scroll bar. I tried modifying the color and such with cs but it didn't change anything. please help the site www.star1on1tutoring.com here is all the code starting with the html, then the css, and the two javascript pages [code] <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="assets/css/main.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="assets/java/global.js"></script> <script type="text/javascript" src="assets/java/menu.js"></script> <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"/> <title>Star 1 on 1 Tutoring</title> <meta name="description" content="One on One tutoring for individuals and small groups in the Charlotte, North Carolina area. Taught by a former Charlotte-Mecklenburg teacher, we cater to your child's individual needs and goals. Package and groups discounts are available. "/> <meta name="robots" content="all,follow"/> <meta name="keywords" content=" star 1 on 1 tutroing, star one on one, one on one, Charlotte, North Carolina, Stonecrest, South Charlotte, Tutor, private tutor, tutoring, dominique greve, help in school, behind in school, huntington learning, huntington tutoring, small group tutoring, teacher, private teacher, math, science, social studies, history, math tutor, science tutor, history, history tutor, social studies tutor, grades, A+, better grades, children, school, better in school, Charlotte private tutor "/> </head> <body> <div id="logo"> </div> <div id="book"> <ul id="internalNav"> <li><a href="#intro">Introduction</a></li> <li><a href="#subjects">Subjects and Grades</a></li> <li><a href="#rates">Rate Information</a></li> <li><a href="#difference">The Difference</a></li> <li><a href="#bookIt">Book It!</a></li> <li><a href="#payment">Payment and Discounts</a></li> </ul> <div class="section" id="intro"> <p>Private tutoring (individual or small group) can provide the help your child needs in order to achieve academic success.* As a former teacher, I am qualified to create an individualized plan to help your child work on specific subjects or content areas, prepare for a difficult exam or project, or simply improve study skills. While teaching and tutoring I have helped students with a variety of academic levels. I have experience with learning disabled students as well as students classified as academically gifted.</p> </div> <div class="section" id="subjects"> <h3> K-8 all subjects (math depends on level)</h3> <h3>Study Skills/Organization</h3> <h3>Introductory Spanish </h3> <h3>High school (depends on course and level) </h3> </div> <div class="section" id="home"> <p>Private tutoring (individual or small group) can provide the help your child needs in order to achieve academic success.* As a former teacher, I am qualified to create an individualized plan to help your child work on specific subjects or content areas, prepare for a difficult exam or project, or simply improve study skills. While teaching and tutoring I have helped students with a variety of academic levels. I have experience with learning disabled students as well as students classified as academically gifted.</p> </div> <div class="section" id="rates"> <h3>Individual Rate: $30/hr</h3> <h3>Small Group Rates: </h3> <h3>2 students $50/hr</h3> <h3>3 students $75/hr</h3> <h3>4 students $100/hr</h3> </div> <div class="section" id="difference"> <p> At Star 1 on 1 Tutoring, your child's program is tailored specifically to his or her needs and learning style. We can focus on your child's actual course work and assignments, using the school's preferred textbooks and resources.* You do not have to commit to a lengthy and inflexible contract with an organization that pursues its own curriculum at its predetermined pace.* Star 1 on 1 Tutoring focuses on what it takes for your child to succeed.</p> </div> <div class="section" id="bookIt"> <h2> For more information or to book your session</h2> <h3> Call 704-321-9226</h3> <h3> or <a href="mailto:dgreve@star1on1tutoring.com">E-mail Me</a></h3> </div> <div class="section" id="payment"> <p> You can pay with a credit card or check with a secure payment on Paypal. I also offer package rates.<h3> Buy 9 sessions get the 10th free.</h3> </p> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="9411314"> <table> <tr><td><input type="hidden" name="on0" value="Package">Package</td></tr><tr><td><select name="os0"> <option value="1 hour session">1 hour session $30.00</option> <option value="5 1- hour sessions">5 1- hour sessions $150.00</option> <option value="10 1- hour sessions">10 1- hour sessions $270.00</option> </select> </td></tr> </table> <input type="hidden" name="currency_code" value="USD"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> </div> <div id="pencil"></div> <div id="apple"></div> </body> </html> @charset "UTF-8"; /* CSS Document */ html, body { overflow-y:scroll; overflow-x:scroll; } body { background-image:url(../images/newbg.jpg); font-size:.9em; overflow-y:scroll; background-attachment:fixed; } #logo { background: url(../images/logobacking.png) no-repeat; position:fixed; top:0px; left:200px; height:198px; width:609px; } #book { background:url(../images/newbook_06.png) no-repeat; position:fixed; left:23px; top:173px; width:960px; height:455px; } #apple { background-image:url(../images/star.png); height:310px; width:340px; position:fixed; left:50px; top:440px; } #pencil { background:url(../images/newpencil.png) no-repeat; position:fixed; top:470px; left:372px; height:278px; width:617px; } #internalNav li a { text-decoration:none; list-style-type: none; color:#000000; } img { border:none; } #internalNav li { font-family:"Courier New", Courier, monospace; font-size:1.5em; color:#000000; list-style-type:none; text-decoration:none; border:none; } #internalNav { position:fixed; left:80px; top:255px; } #home { display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:230px; width:375px; word-spacing: .01em; } #subjects { display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #rates{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #difference{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #bookIt{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #intro{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:230px; width:375px; word-spacing: .01em; } #payment{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:230px; width:370px; } // JavaScript Document function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function showSection(id) { var divs = document.getElementsByTagName("div"); for (var i=0; i<divs.length; i++ ) { if (divs[i].className.indexOf("section") == -1) continue; if (divs[i].getAttribute("id") != id) { divs[i].style.display = "none"; } else { divs[i].style.display = "block"; } } } function prepareInternalnav() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("internalNav")) return false; var nav = document.getElementById("internalNav"); var links = nav.getElementsByTagName("a"); for (var i=0; i<links.length; i++ ) { var sectionId = links[i].getAttribute("href").split("#")[1]; if (!document.getElementById(sectionId)) continue; document.getElementById(sectionId).style.display = "none"; links[i].destination = sectionId; links[i].onclick = function() { showSection(this.destination); return false; } } } addLoadEvent(prepareInternalnav); [CODE] Hi guys I kinda needed help on jQuery/ javascript.. Here's the test page.. http://development.andrewfopalan.com/devpage/test.html# what I'm trying to do is like this.. http://trailers.apple.com/trailers/s...bandofmisfits/ the movie box... so far, I have made the cosmetics.. but the thing I was going to ask was.. when you click on the down arrow.. a popup dropdown list is going to show.. the problem is I am copying the same effect as the one with apple.. when you click outside of the popup dropdown list, the dropdown list should be fading out... but it wouldnt... I tried using doing.. it like this Code: $("#wrap" ).click(function () {
$(".dropdown").fadeOut();
});
but the problem is.. whenever I click the down arrow button.. it continues to fadeout.. as soon as it fadesin... how should I do this? please guide me.. everything works just fine.. just this one.. I am really lost.. i the whole jquery code is in the page sirs... please help me pretty new to javascript/jquery.. delete this thread
When Scroll Bar is scrolling, at that time how can we find using js what is the element at the topmost position in that window pane only. When the user scrolls down, the value of element at the time of that at topmost position I'm trying to figure out which elements of a document are visible as the user scrolls the Firefox browser. I haven't written the code yet but I think I should be able to do it by keeping track of the current display using the following properties: window.content.scrollX, window.content.scrollY, window.content.innerWidth, window.content.innerHeight. -- with these 4 I can determine which part of the document is visible. Then for each element I can figure out its display position using, offsetWidth, offsetHeight, offsetTop, offsetLeft. This would entail traversing the DOM and perculating the offset values down to all the children. While this would likely work, it seems inefficient. Do you know of any other ways to determine which elements are actually on the screen? I have a Java script chat, How would I make a scroll bar for it? Does any one have any code for that? or do you know what I have to do? thanks, Yo_papa75 So, here is my question: Is there some possibility to put the horizontal scroll bar of the web browser into the center if the "width" of web page are bigger then the "width" of the web browser screen? So I don't need to scroll to right if I open the page, but the horizontal scroll bar will be positioned in the center. That code should do the same think like I when I take the scroll bar and put it in the center position, but this should be happen when I load the page automatically. Or how can I do that? thanks to all . . . So, here is my question: Is there some possibility with php to put the horizontal scroll bar of the web browser into the center if the "width" of web page are bigger then the "width" of the web browser screen? So I don't need to scroll to right if I open the page, but the horizontal scroll bar will be positioned in the center. That code should do the same think like I when I take the scroll bar and put it in the center position, but this should be happen when I load the page automatically. Or how can I do that? thanks to all . . . Hello. Could you guys point me in the right direction. I have a DIV that I woul like to move along with the users vertical scrollbar. So when the user scrolls down on the page the DIV will follow. Where can I find information on how I can do this.
Hi, I'm currently working on a JavaScript scrollbar on my website: http://allotrope-dome.net. I managed to get most of the code working. The only part that isn't working is that users can't click and drag on the scrollbar (click on the "About" section in the navigation bar to get a better idea of what I'm talking about). If any of you could help me out with that, I'd really appreciate it. Thanks! To see the code, go to http://allotrope-dome.net/about.php and click "View Source." http://www.hannahdesign.co.nz/client...ing-collateral So here is what I have done so far: - Used FlexCroll (1) to make custom scrollbars on the top image panel - In the scrollbar - I have used a no-repeat background image that is 17px in width Problems: - When loading a vertical scrollbar appears - The horizontal scrollbar does not go all the way to the end Here is what I want to do: - Disable the vertical scrollbar for ONLY this div (this same script is used for another vertical scrollbar - http://www.hannahdesign.co.nz/client/summary) - Make the horizontal scrollbar limited to 17px or another set width. I have included both my CSS and the uncompressed JS. (1) - FlexCroll - http://www.hesido.com/web.php?page=customscrollbar Appending to a div (id=right) over time. There is a scrollbar on the right side. At some point, the scrollbar appears but the user has to manually move the scrollbar to the bottom to see the newest appends. Googled and found a number of "solutions" that I can't get to work. The ideal would be to always have the scrollbar move to the bottom after each append. Code: #right {
background-color: #FF0;
width: 150px;
height: 300px;
float: right;
overflow : auto;
}
$("#right").append("<p>something important here");
Hi, I want to let my scrollbar start at a random point when a page opens. I would like the page to load each visit somewhere else and always random like let's say one time more in the middle of the page and the other time more at the end of the page and an other time somewhere else. Someone in php-forums told me that this can by done by Javascript. How do I do that? Thanx for helping me out. Best regards, Thoaren I am working on a ajax chat system right now and I've ran into a little problem. I have no idea how to go about doing this but I know there has to be a way of doing this because I've seen it done before on other ajax chats I've seen. How do I ago about moving the scrollbar of a div to the bottom so that it shows the last that has been entered into the chat. If you need me to explain more then just let me know. But basically I'm wanting the scrollbar when it overflows in the window of a div to go and to the bottom when someone enters something new to the chat. I am using this code to control scrolling of 2 divs at the same time, but i want to be able control 3 (or more) divs at the same time.. what am i missing? JS in head: <script type="text/javascript"> function scrollDiv(controllingElement, controlledElementID) { var controlledElement = document.getElementById(controlledElementID); controlledElement.scrollTop = controllingElement.scrollTop; controlledElement.scrollLeft = controllingElement.scrollLeft; } </script> JS in body applied to parent / controlling div: <div id="master" onscroll="scrollDiv(this,'top');" > ...</div> Names of the 2 divs controlled by "master": <div id="top" >...</div> <div id="bottom" >...</div> Hi all, I am currently building a PHP based site and need some help with a Javascript problem I have. I am relatively new to PHP and have not started on learning any Javascript yet! I copied some Javascript that I found on 'http://www.javascriptkit.com/script/script2/htmltooltip.shtml' so that I could use tooltips. It works well and I have edited the CSS a bit to suit my needs. However I still have one problem which I can't solve as I believe it is the Javascript that is causing the problem. My page (which has the tooltips and code on) has vertical and horizontal scrollbars that only allow you to move a tiny bit. They are unnecessary and even when I remove almost all the elements of the page, the scrollbars remain. When I remove the line '<script type="text/javascript" src="scripts/jquery-1.2.2.pack.js"></script>' from my code, the scrollbars dissappear, but this line is vital for the tooltips to function. This script is available for download at the given URL above (it is in the center of the page called 'jquery-1.2.2.pack.js'). Please could somebody take a look and see if they can help, any advice appreciated. Thanks Very Much Dan I have a site with hidden layers http://dyingtobemen.com/. I would like to have the scrollbar customized but I'm having problems finding anything that will work with hidden layers. Anyone know of something I can use with hidden layers to customize a scrollbar? Thanks.
Hey guys. I've been trying to figure this out now for the past 9 hours and I have no idea what I'm doing...lol Ok, I have images inside of a container that is inside of an iframe. When I click on an image, content underneath is revealed by sliding everything underneath it down. The problem I have is that when it slides the content down, all the other images and content are cut off. I want it that when the content extends past the height of the div#container, it autoresizes, if that's possible. But I don't wanna use the iframe scrollbar. Only the parent scrollbar. Here's a link for the entire code of the Website. Open up index.html, click on Salvation and click on one or two of the images, and you'll see what I'm talking about. The salvation.html is the source for the iframe. http://www.mediafire.com/?zqzym4iniyd Thanks so much for your help! |
|||||||