www.webdeveloper.com
Results 1 to 2 of 2

Thread: Using a HTML5, CSS3 and jQuery website template, can't get the Java pop-ups to work

  1. #1
    Join Date
    Apr 2012
    Posts
    2

    Using a HTML5, CSS3 and jQuery website template, can't get the Java pop-ups to work

    This is a free template I am trying to adapt for a personal portfolio:
    Vivid Photo: Free Photography Template | PriteshGupta.com

    I have edited the original template and uploaded it HERE
    This is the style.css:
    http://home.stoynev.net/test/css/style.css

    On the menu on the right, the template originally comes with three links - ME, MY WORK and CONTACT; when clicked, a Java pop-up shows the content of the links.

    However I need two more links - RESUME and REFERENCES.

    The pop-ups are defined in a separate file called pop-ups.js:
    http://home.stoynev.net/test/js/pop-ups.js

    I have added the respective code in pop-ups.js for the two additional menu entries that I need, and also in index.html so they show on the webpage,
    in style.css along with the code for the three pop-ups that work "out of the box".


    The problem is that after all done, when I click on ANY of the two new entries I added (be it References or Resume) - no pop-up shows...


    The two articles - References and Resume - are defined in index.html as such:
    Code:
        <article id="popupResume" class="popupResume">
            <a id="popupResumeClose">
        </article>
    
        <article id="popupReferences" class="popupReferences">
            <a id="popupReferencesClose">
        </article>
    Here is the modified section from style.css - I added just two entries in each line (popupResume and popupReferences, etc):
    Code:
        #popupAbout,#popupProjects,#popupResume,#popupReferences,#popupContact{height:600px;width:900px;overflow:auto;background-color:rgba(0, 0, 0, 0.75);border:2px solid #cecece;z-index:15;padding:20px;color:#FFF;-webkit-box-shadow:0px 0px 4px #000 inset;-moz-box-shadow:0px 0px 4px #000 inset;box-shadow:0px 0px 4px #000 inset;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;margin-top:-50px;visibility:hidden}
        #popupAbout p,#popupProjects p,#popupResume p,#popupReferences p,#popupContact p{padding-left:10px;font-size:18px;line-height:20px}
        #popupAbout h1,#popupProjects h1,#popupResume h1,#popupReferences h1,#popupContact h1{text-align:left;font-size:30px;letter-spacing:1px;border-bottom:1px dotted #D3D3D3;padding-bottom:2px;margin-bottom:20px}
        #popupAboutClose,#popupProjectsClose,#popupResumeClose,#popupReferencesClose,#popupContactClose{right:6px;top:6px;position:absolute;display:block}
        *:focus{outline:none}
    And these are the two paragraphs I added to pop-outs.js:
    Code:
      var popupResumeStatus=0;
        function loadPopupResume(){if(popupResumeStatus==0){$("#popupResume").fadeIn("slow");
        popupResumeStatus=1}}function disablePopupResume(){if(popupResumeStatus==1){$("#popupResume").fadeOut("slow");
        popupResumeStatus=0}}function centerPopupResume(){var b=document.documentElement.clientWidth;
        var d=document.documentElement.clientHeight;
        var c=$("#popupResume").height();
        var a=$("#popupResume").width();
        $("#popupResume").css({position:"absolute",top:d/2-c/2,left:b/2-a/2})}$(document).ready(function(){$("#popupResume").fadeOut();
        popupResumeStatus=0;
        $("#Resume").click(function(){$("#popupResume").css({visibility:"visible"});
        disablePopupAbout();
        disablePopupContact();
        disablePopupProjects();
        disablePopupReferences();
        centerPopupResume();
        loadPopupResume()});
        $("#popupResumeClose").click(function(){disablePopupResume()})});
        $(function(){$("#popupResume").jScrollPane();
        $(".popupResume").jScrollPane({showArrows:true,horizontalGutter:10})});
    
    
        var popupReferencesStatus=0;
        function loadPopupReferences(){if(popupReferencesStatus==0){$("#popupReferences").fadeIn("slow");
        popupReferencesStatus=1}}function disablePopupReferences(){if(popupReferencesStatus==1){$("#popupReferences").fadeOut("slow");
        popupReferencesStatus=0}}function centerPopupReferences(){var b=document.documentElement.clientWidth;
        var d=document.documentElement.clientHeight;
        var c=$("#popupReferences").height();
        var a=$("#popupReferences").width();
        $("#popupReferences").css({position:"absolute",top:d/2-c/2,left:b/2-a/2})}$(document).ready(function(){$("#popupReferences").fadeOut();
        popupReferencesStatus=0;$("#References").click(function(){$("#popupReferences").css({visibility:"visible"});
        disablePopupAbout();
        disablePopupContact();
        disablePopupResume();
        disablePopupProjects();
        centerPopupReferences();
        loadPopupReferences()});
        $("#popupReferencesClose").click(function(){disablePopupReferences()})});
        $(function(){$("#popupReferences").jScrollPane();
        $(".popupReferences").jScrollPane({showArrows:true,horizontalGutter:10})});

    I am not that good w/ Java so any help will be greatly appreciated, TIA!

  2. #2
    Join Date
    Apr 2012
    Posts
    2

    Using a HTML5, CSS3 and jQuery website template, can't get the Java pop-ups to work

    This is a free template I am trying to adapt for a personal portfolio:
    Vivid Photo: Free Photography Template | PriteshGupta.com

    I have edited the original template and uploaded it HERE
    This is the style.css:
    http://home.stoynev.net/test/css/style.css

    On the menu on the right, the template originally comes with three links - ME, MY WORK and CONTACT; when clicked, a Java pop-up shows the content of the links.

    However I need two more links - RESUME and REFERENCES.

    The pop-ups are defined in a separate file called pop-ups.js:
    http://home.stoynev.net/test/js/pop-ups.js

    I have added the respective code in pop-ups.js for the two additional menu entries that I need, and also in index.html so they show on the webpage,
    in style.css along with the code for the three pop-ups that work "out of the box".


    The problem is that after all done, when I click on ANY of the two new entries I added (be it References or Resume) - no pop-up shows...


    The two articles - References and Resume - are defined in index.html as such:
    Code:
        <article id="popupResume" class="popupResume">
            <a id="popupResumeClose">
        </article>
    
        <article id="popupReferences" class="popupReferences">
            <a id="popupReferencesClose">
        </article>
    Here is the modified section from style.css - I added just two entries in each line (popupResume and popupReferences, etc):
    Code:
        #popupAbout,#popupProjects,#popupResume,#popupReferences,#popupContact{height:600px;width:900px;overflow:auto;background-color:rgba(0, 0, 0, 0.75);border:2px solid #cecece;z-index:15;padding:20px;color:#FFF;-webkit-box-shadow:0px 0px 4px #000 inset;-moz-box-shadow:0px 0px 4px #000 inset;box-shadow:0px 0px 4px #000 inset;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;margin-top:-50px;visibility:hidden}
        #popupAbout p,#popupProjects p,#popupResume p,#popupReferences p,#popupContact p{padding-left:10px;font-size:18px;line-height:20px}
        #popupAbout h1,#popupProjects h1,#popupResume h1,#popupReferences h1,#popupContact h1{text-align:left;font-size:30px;letter-spacing:1px;border-bottom:1px dotted #D3D3D3;padding-bottom:2px;margin-bottom:20px}
        #popupAboutClose,#popupProjectsClose,#popupResumeClose,#popupReferencesClose,#popupContactClose{right:6px;top:6px;position:absolute;display:block}
        *:focus{outline:none}
    And these are the two paragraphs I added to pop-outs.js:
    Code:
      var popupResumeStatus=0;
        function loadPopupResume(){if(popupResumeStatus==0){$("#popupResume").fadeIn("slow");
        popupResumeStatus=1}}function disablePopupResume(){if(popupResumeStatus==1){$("#popupResume").fadeOut("slow");
        popupResumeStatus=0}}function centerPopupResume(){var b=document.documentElement.clientWidth;
        var d=document.documentElement.clientHeight;
        var c=$("#popupResume").height();
        var a=$("#popupResume").width();
        $("#popupResume").css({position:"absolute",top:d/2-c/2,left:b/2-a/2})}$(document).ready(function(){$("#popupResume").fadeOut();
        popupResumeStatus=0;
        $("#Resume").click(function(){$("#popupResume").css({visibility:"visible"});
        disablePopupAbout();
        disablePopupContact();
        disablePopupProjects();
        disablePopupReferences();
        centerPopupResume();
        loadPopupResume()});
        $("#popupResumeClose").click(function(){disablePopupResume()})});
        $(function(){$("#popupResume").jScrollPane();
        $(".popupResume").jScrollPane({showArrows:true,horizontalGutter:10})});
    
    
        var popupReferencesStatus=0;
        function loadPopupReferences(){if(popupReferencesStatus==0){$("#popupReferences").fadeIn("slow");
        popupReferencesStatus=1}}function disablePopupReferences(){if(popupReferencesStatus==1){$("#popupReferences").fadeOut("slow");
        popupReferencesStatus=0}}function centerPopupReferences(){var b=document.documentElement.clientWidth;
        var d=document.documentElement.clientHeight;
        var c=$("#popupReferences").height();
        var a=$("#popupReferences").width();
        $("#popupReferences").css({position:"absolute",top:d/2-c/2,left:b/2-a/2})}$(document).ready(function(){$("#popupReferences").fadeOut();
        popupReferencesStatus=0;$("#References").click(function(){$("#popupReferences").css({visibility:"visible"});
        disablePopupAbout();
        disablePopupContact();
        disablePopupResume();
        disablePopupProjects();
        centerPopupReferences();
        loadPopupReferences()});
        $("#popupReferencesClose").click(function(){disablePopupReferences()})});
        $(function(){$("#popupReferences").jScrollPane();
        $(".popupReferences").jScrollPane({showArrows:true,horizontalGutter:10})});

    I am not that good w/ Java so any help will be greatly appreciated, TIA!

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.10363 seconds
  • Memory Usage 2,886KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (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
  • (6)bbcode_code
  • (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