Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: About .CSS code

  1. #1
    Join Date
    Mar 2009
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default About .CSS code

    Hi everyone,
    I'm a new member here. I have a blog in blogger.com. I want to apply dropdown menu. I'm trying with matt menu. without hosting how can I download .css and .js files. Can I use the code of .css and .js files. in my blog. If it is possible where do I paste the code. If possible without .css nad .js then how...? Please help me to resolve it.


    thanks...

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Do you mean you can't upload files to the server? If you can, just link to them in the head section of your page like this:
    HTML Code:
    <link type="text/css" href="path_to_file/style.css" rel="stylesheet">
    <script type="text/javascript" src="path_to_file/script.js"></script>
    If you can't upload the files, you can put them on the page itself:
    HTML Code:
    <style type="text/css">
    style code here
    </style>
    <script type="text/javascript">
    script code here
    </script>
    If this is not what you mean, please try to explain it in more detail.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Mar 2009
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thnx Snookerman,
    I use this code(given below) without downloading jqueryslidemenu.css and jqueryslidemenu.js files from dynamicdrive.com. first time it works but now it looks like a long list.
    please visit my blog.
    http://smartphonemania.blogspot.com/

    HTML Code:
    <link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.css" />
    
    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.js"></script>

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Even if it would work, I don't think DD is too keen about you using their bandwidth. You're gonna have to find another way to upload your files, try 110mb, it's absolutely free.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Mar 2009
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    HTML Code:
    <style type="text/css">
    style code here
    </style>
    <script type="text/javascript">
    script code here
    </script>

    When I use these format then I got a error msg:
    XML error message: Open quote is expected for attribute "{1}" associated with an element type "type".
    what can I do? pls help...
    thnx

  6. #6
    Join Date
    Mar 2009
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Hi Snookerman,
    when I paste the code of jqueryslidemenu.js files in blogger.com HTML editor between <script type=”text/javascript”> and </script> tag then a error message is appeared :-


    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The content of elements must consist of well-formed character data or markup.

    Here is the code. Is there any error?..
    HTML Code:
    <script type="text/javascript">
    var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}
    
    var jqueryslidemenu={
    
    animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
    
    buildmenu:function(menuid, arrowsvar){
    	jQuery(document).ready(function($){
    		var $mainmenu=$("#"+menuid+">ul")
    		var $headers=$mainmenu.find("ul").parent()
    		$headers.each(function(i){
    			var $curobj=$(this)
    			var $subul=$(this).find('ul:eq(0)')
    			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
    			this.istopheader=$curobj.parents("ul").length==1? true : false
    			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
    			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
    				'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
    				+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
    				+ '" style="border:0;" />'
    			)
    			$curobj.hover(
    				function(e){
    					var $targetul=$(this).children("ul:eq(0)")
    					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
    					var menuleft=this.istopheader? 0 : this._dimensions.w
    					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
    					if ($targetul.queue().length<=1) //if 1 or less queued animations
    						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
    				},
    				function(e){
    					var $targetul=$(this).children("ul:eq(0)")
    					$targetul.slideUp(jqueryslidemenu.animateduration.out)
    				}
    			) //end hover
    		}) //end $headers.each()
    		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
    	}) //end document.ready
    }
    }
    
    //build menu with ID="myslidemenu" on page:
    jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
    </script>
    Thnx

  7. #7
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    First:
    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.
    Your page is in violation of Dynamic Drive's usage terms, which, among other things, states that the credit notice inside script must stay intact. Please reinstate the notice first.
    Second, make sure you use the same doctype as the one used on the DD demo page.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  8. #8
    Join Date
    Mar 2009
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Dear Snookerman
    My DD script link is here:
    http://www.dynamicdrive.com/style/cs...el_css_menu_2/

    It includes one .CSS file
    http://www.dynamicdrive.com/cssexamp...yslidemenu.css
    and one .JS file
    http://www.dynamicdrive.com/cssexamp...ryslidemenu.js

    when I use this code sometimes it works.
    HTML Code:
    <link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.css" />
    
    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.js"></script>
    when I paste CSS code and use the link of JS code it works (sometimes not).
    HTML Code:
    <style type='text/css'>
    
    .jqueryslidemenu{
    font: bold 12px Verdana;
    background: #414141;
    width: 100%;
    }
    
    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    background: #414141; /*background of tabs (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;
    }
    
    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }
    
    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: white;
    }
    
    .jqueryslidemenu ul li a:hover{
    background: black; /*tab link background during hover state*/
    color: white;
    }
    	
    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{
    top: 0;
    }
    
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    }
    
    .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
    background: #eff9ff;
    color: black;
    }
    
    /* ######### CSS classes applied to down and right arrow images  ######### */
    
    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }
    
    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    }
    </style>
    
    
    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->
    
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
    <script src='http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.js' type='text/javascript'/>
    But when I paste the CSS and the JS code it shows an error which I described earlier.

    Here is my site link:
    http://smartphonemania.blogspot.com/
    Please check.

    Thanks

  9. #9
    Join Date
    Mar 2009
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    hi eros1234
    first time I tried with your format. but sometimes the dropdown menu appear, most of time not.if u visit my site u can understand. the .CSS code is ok. but the .JS code creates problem. when I use its code I got an error. I have no domain and I use blogger.com. So I can't download the CSS and JS file.what should I do?
    thnks

  10. #10
    Join Date
    Mar 2009
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    hi snookerman,
    doctype of my site is XHTML 1.0 Strict. is it ok? I want to use jQuery Multi Level CSS Menu #2 But it doesn't show any level.
    Pls visit my site and tell me... what to do?
    http://smartphonemania.blogspot.com/
    thnx

Tags for this Thread

Bookmarks

Posting Permissions

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