Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    Sunshine State
    Posts
    80
    Thanks
    18
    Thanked 0 Times in 0 Posts

    DotNetNuke - JQuery Plugin

    didn't know where else to put this... ...and I have posted on the DNN forum as well, however, responses (if any) are notoriously slow and not always on point

    bear with me because I have no idea what code you will need to see and I'm unable to provide a link for you to view what is going on

    so in my hours of research I finally learned how to add <script> and <link> via the page header tags and thought I would give using a jquery plugin a shot - guess what? it worked on the first shot (!)...kind of

    the facebox plugin is like a lightbox I guess? a user clicks a link or an image and a larger image displays...

    Page Header Tags:
    Code:
    	<script src="/Portals/16/facebox/lib/jquery.js" type="text/javascript"></script>
    	<link href="/Portals/16/facebox/src/facebox.css" rel="stylesheet" type="text/css" />
    	<script src="/Portals/16/facebox/src/facebox.js" type="text/javascript"></script>
    	<script type="text/javascript">
    	jQuery(document).ready(function($) {
    	  $('a[rel*=facebox]').facebox() 
    	});
    	</script>
    what is happening is the popup is being hidden behind the main navigation; by viewing source I'm able to see that the facebox code is called before the navigation code
    View Source:
    Code:
    <script type="text/javascript" src="/Resources/Shared/Scripts/jquery/jquery.min.js" ></script>
    <script src="/Portals/16/facebox/lib/jquery.js" type="text/javascript"></script>
    <link href="/Portals/16/facebox/src/facebox.css" rel="stylesheet" type="text/css" /> 
    <script src="/Portals/16/facebox/src/facebox.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $('a[rel*=facebox]').facebox() 
    }); 
    </script>
    <link href="/Portals/_default/Skins/_default/WebControlSkin/Default/TabStrip.Default.css" rel="stylesheet" type="text/css" />
    <link href="/Portals/_default/Skins/CS.Recruit/RecruitMenu/css/superfish.css" rel="stylesheet" type="text/css" media="all" />
    <link href="/Portals/_default/Skins/CS.Recruit/RecruitMenu/theme.css" rel="stylesheet" type="text/css" media="all" />
    is there anyway that I can make it so the facebox comes AFTER the menu?

    thanks for your help and patience!

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,925
    Thanks
    46
    Thanked 203 Times in 202 Posts
    this is going to be more of a CSS/HTML issue more than an asp.net issue per se- probably why you had little to no responses in DNN forum. So I am assume from your post you are using a master page correct?
    so what happens in a master page is this...
    Code:
    .... all the header crap ....
    <asp:Content ID="MasterHeader" blah blah blah></asp:Content>
    </head>
    
    <body>
    <form>
    <div id="wrapper">
      <div id="Nav"> your navigation menu goes here </div>
      <div id="pseudoBodyWrapper">
        <asp:Content ID="PseudoBody" blah blah blah></asp:Content>
      </div>
    </div>
    </form>
    </body>
    </html>
    so what happens here is any page you make the is a child of the master page gets all that crap put in automatically. What you really want to do is style your master page. This can prove to be a challenge because you can't "see" a master page and whenever you change contents you need to make a new child to update it to the master (if you have differences in content). My suggestion... Make a single one page frame that will have all of your CSS links and javascript links and jquery links and nav bars and ALL of that fun stuff... just a plain ol page. Then once you have that you essentially (and very carefully) copy those elements into a master page one at a time to get them in the right spot.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New Coder
    Join Date
    Jul 2011
    Location
    Sunshine State
    Posts
    80
    Thanks
    18
    Thanked 0 Times in 0 Posts
    thanks for that alykins

    unfortunately the navigation and <head></head> stuff is all located within the main skin files and I do not (and will not) have access to those files and DNN kinda anticipates that limitation by allowing content admins to add page header tags

    and of course the piece that I need moved down cannot be added into the html module itself or this would totally be a non-issue

    and once again I find that I have an appropriate username...

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,925
    Thanks
    46
    Thanked 203 Times in 202 Posts
    ok so you are saying u cannot modify the master correct?
    what you will need to do in that case is replicate the rendered master page... to do this...
    go to your "main page" and view source... you will see a lot of different material in there that is not in your "main page.aspx" because it is getting it from the master (which you can't edit). from there the master will have inserted CSS link files navigate to these and you will now have the CSS as well... "rebuild" the page locally using just html/CSS tags and replicate your main page... figure out how to style it accordingly. most likely the nav bar is positioned and the facebook popup is positioned as well- again assuming this is the issue the facebook popup most likely has a lower z-index than the nav. you may have to do some "fancy footwork" to get the page to render how you want (if you cannot edit the master page or the CSS it inherits)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    New Coder
    Join Date
    Jul 2011
    Location
    Sunshine State
    Posts
    80
    Thanks
    18
    Thanked 0 Times in 0 Posts
    aha! I hadn't thought about the z-index

    the facebox plugin does have its own css that I can modify - going to try it now and will report back


  •  

    Posting Permissions

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