www.webdeveloper.com
Results 1 to 2 of 2

Thread: How to change full css classes at different page heights?

  1. #1
    Join Date
    Sep 2017
    Posts
    2

    How to change full css classes at different page heights?

    Hello everybody I'm new here and to the ever widening world of javascript.I'm trying to write a javascript function that changes out ,full css classes at different heights in the page (aka...the nav styles at different sections of the web page). I'm open to suggestions on how to accomplish this. I've tried swapping css.style sheets, changing the styles manually, I've been thinking about just changing the over all class.Ideally I like to just switch out style sheets at different pageHeights? If thats possible. Any and all help and instruction and suggestions is very appreciated. Here is the basic layout of my function, a css style, and html pertaining to the nav section. Please forgive me if I post this wrong I hope I get the forum code blocks right.


    Here is my function:It's in an external .js file

    Code:
    <script type="text/javascript">
    
    var yPos;
    
    function swapStyleSheet(sheet){
    
    		yPos = window.pageYOffset;	
    	if(yPos > 698 && yPos < 1800){	
    	document.getElementById('middle').setAttribute('href', sheet);						
    }else if(yPos > 1900){
    	document.getElementById('bottom').setAttribute('href', sheet);
    }else{
    	document.getElementById('top').setAttribute('href', sheet);	
    	}
    }
    
    </script>
    Here is my html:


    HTML Code:
    <!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org//TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="keywords" content=""/>
    <meta name="description" content="parallax template"/>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
    <meta name="viewport" content="width=device-width, intial-scale=1.0">
    
    <link id="bottom" rel="stylesheet" type="text/css" href="css/bottom.css"/>
    <link id="top" rel="stylesheet" type="text/css" href="css/top.css"/>
    <link id="middle" rel="stylesheet" type="text/css" href="css/middle.css"/>
    <link rel="stylesheet" type="text/css" href="css/main_info.css"/>
    <title>White Canvas Designs</title>
    </head>
    <body>
    <div id="nav" onscroll="swapStyleSheet('top.css','middle.css','bottom.css')">
    
    		<a id="home" href="#">HOME</a>
    		<a id="about" href="#">ABOUT</a>
    		<a id="portfolio" href="#">PORTFOLIO</a>
    		<a id="contact" href="#">CONTACT</a>
    		<a id="hosting" href="#">HOSTING</a>
    	
    </div>	
    Then I want to alter this CSS code three different ways(They also have corresponding :hover and touch classes as well)
    Which is why I thought to change the css style sheets would be easiest way.

    Code:
    #home, #about, #portfolio, #contact, #hosting {
    display:inline;
    float:left;
    font-family:Charlemagne Std, Helvetica, sans-serif;
    font-size:23px;
    margin:0;
    padding: 18px 24px;
    margin-right: 30px;
    border-radius:3px;
    text-decoration:none;
    color:#000000;
    text-shadow:1px 1px 3px #cc6633;
    transition: background 0.5s ease-in 0s;
    transition: color 0.3s ease-in 0s;
    transition: background-color 0.5s ease-in 0s;
    transition: opacity 0.5s ease-in 0s;
    }
    Please help any suggests or comments are greatly appreciated.

    Humbly,
    Drizzt213

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,859
    If all you are doing is using CSS to set and trigger on hover, you do not need javascript, you just need to use the class="" attributes on those elements affected by the various conditions you require.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.12921 seconds
  • Memory Usage 2,853KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (2)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates