9 Replies - 5209 Views - Last Post: 12 December 2014 - 02:09 AM

#1 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

How to fix style error

Posted 10 December 2014 - 07:59 PM

I have two errors that I am not sure how to fix and my slides don't move. How can I fix my errors? :dontgetit:

Line 223, Column 31: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.) <style type="text/css">

Contexts in which element style may be used:If the scoped attribute is absent: where metadata content is expected.If the scoped attribute is absent: in a noscript element that is a child of a head element.If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent.Content model for element div:Flow content.


Line 261, Column 19: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.) <style>

Contexts in which element style may be used:If the scoped attribute is absent: where metadata content is expected.If the scoped attribute is absent: in a noscript element that is a child of a head element.If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent.Content model for element div:Flow content.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Graduation Announcements</title>

<meta name="keywords" content="photography" />
<meta name="description" content="portfolio" />



<!--
Template 2043 Pinky Flow
http://www.tooplate.com/view/2043-pinky-flow
-->
<link href="css/tooplate_style.css" rel="stylesheet" type="text/css" />



<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>

<!-- /***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/ -->



<script type="text/javascript">

ddsmoothmenu.init({
	mainmenuid: "tooplate_menu", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

</head>
<body>


<div id="tooplate_wrapper">
	<div id="tooplate_header">
       	<div id="site_title"><h1><a href="index.html">Rubi Noodle Studios</a></h1></div>
    	
        <div id="tooplate_menu" class="ddsmoothmenu">
                <ul>
                    <li><a href="index.html" class="selected"><span></span>Home</a></li>
                    <li><a href="gallery.html"><span></span>Galleries</a>
                        <ul>
							<li><a href="families.html">Families</a></li>
                            <li><a href="children.html">Children</a></li>
                            <li><a href="graduates.html">Graduates</a></li>
                             <li><a href="engagement.html">Engagement</a></li>
                            <li><a href="weddings.html">Weddings</a></li>
                             <li><a href="maternity.html">Maternity</a></li>
                           
                      </ul>
                  </li>
                    <li><a href="information.html"><span></span>Information</a>
                        <ul>
                            <li><a href="announcements.html">Graduation Announcements</a></li>
                            <li><a href="pricing.html">Pricing</a></li>
                            <li><a href="hints.html">Helpful Hints</a></li>
                           
                      </ul>
                  </li>
                    <li><a href="client.html"><span></span>Client Viewing</a></li>
                    <li><a href="contact.html"><span></span>Contact</a></li>
                </ul>
                <br style="clear: left" />
            </div> <!-- end of tooplate_menu -->
			
			 <div id="tooplate_main">
            	<h2 style="text-align:center;">Graduation Announcements</h2></div>

 <div id="tooplate_content">
                
              
<div class="col_allw280 fp_service_box">
                      
                    </div>
<div class="col_allw280 fp_service_box">

         <!-- it works the same with all jquery version from 1.x to 2.x -->
<script type="text/javascript" src="js/jquery-1.9.1.min.js">
</script> <!-- use jssor.slider.mini.js (40KB) instead for release -->
 <!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) -->
 <script type="text/javascript" src="js/jssor.js">
</script> <script type="text/javascript" src="js/jssor.slider.js">
</script> 

<script type="text/javascript">
   
 

        jQuery(document).ready(function ($) {
            var options = {
                $AutoPlay: false,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
                $AutoPlayInterval: 4000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

                $ArrowKeyNavigation: true,   			            //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
                $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
                //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                $SlideSpacing: 0, 					                //[Optional] Space between each slide in pixels, default value is 0
                $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
                $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
                $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
                $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
                },

                $ThumbnailNavigatorOptions: {
                    $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

                    $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                    $AutoCenter: 3,                                 //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
                    $Lanes: 1,                                      //[Optional] Specify lanes to arrange thumbnails, default value is 1
                    $SpacingX: 3,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
                    $SpacingY: 3,                                   //[Optional] Vertical space between each thumbnail in pixel, default value is 0
                    $DisplayPieces: 9,                              //[Optional] Number of pieces to display, default value is 1
                    $ParkingPosition: 260,                          //[Optional] The offset position to park thumbnail
                    $Orientation: 1,                                //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
                    $DisableDrag: false                            //[Optional] Disable drag or not, default value is false
                }
            };

            var jssor_slider2 = new $JssorSlider$("slider2_container", options);
            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizes
            function ScaleSlider() {
                var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;
                if (parentWidth)
                    jssor_slider2.$ScaleWidth(Math.min(parentWidth, 600));
                else
                    window.setTimeout(ScaleSlider, 30);
            }
            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            //responsive code end
        });
    </script>
    <!-- Jssor Slider Begin -->
    <!-- You can move inline styles to css file or css block. -->
    <div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; margin: 0 auto;">

        <!-- Loading Screen -->
        <div id="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(images/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>

        <!-- Slides Container -->
        <div id="slides" style="cursor: default; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
            <div>
                <img id ="image1" src="images/photography/002.jpg" alt="photo" />
                <img id ="thumb1" src="images/photography/thumb-002.jpg" alt="thumb" />
            </div>
            <div>
                <img id="image2" src="images/photography/003.jpg" alt="photo" />
                <img id="thumb2" src="images/photography/thumb-003.jpg" alt="thumb" />
            </div>
            <div>
                <img id="image3" src="images/photography/004.jpg" alt="photo" />
                <img id="thumb3" src="images/photography/thumb-004.jpg" alt="thumb" />
            </div>
            <div>
                <img id="image4" src="images/photography/005.jpg"  alt="photo"/>
                <img id="thumb4" src="images/photography/thumb-005.jpg" alt="thumb" />
            </div>
            <div>
                <img id="image5" src="images/photography/006.jpg" alt="photo" />
                <img id="thumb5" src="images/photography/thumb-006.jpg" alt="thumb" />
            </div>
            <div>
                <img id="image6" src="images/photography/007.jpg" alt="photo" />
                <img id="thumb6" src="images/photography/thumb-007.jpg" alt="thumb" />
            </div>
            <div>
                <img id="image7" src="images/photography/008.jpg" alt="photo" />
                <img id="thumb7" src="images/photography/thumb-008.jpg" alt="thumb" />
            </div>
            <div>
                <img id="image8" src="images/photography/009.jpg" alt="photo" />
                <img id="thumb8" src="images/photography/thumb-009.jpg" alt="thumb" />
            </div>
            <div>
                <img id="image9" src="images/photography/010.jpg" alt="photo" />
                <img id="thumb9" src="images/photography/thumb-010.jpg" alt="thumb" />
            </div>
            <div>
                <img id="image10" src="images/photography/011.jpg" alt="photo" />
                <img id="thumb10" src="images/photography/thumb-011.jpg" alt="thumb" />
            </div>
        </div>
        
        <!-- Arrow Navigator Skin Begin -->
        <style type="text/css">
            /* jssor slider arrow navigator skin 02 css */
            /*
            .jssora02l              (normal)
            .jssora02r              (normal)
            .jssora02l:hover        (normal mouseover)
            .jssora02r:hover        (normal mouseover)
            .jssora02ldn            (mousedown)
            .jssora02rdn            (mousedown)
            */
            .jssora02l, .jssora02r, .jssora02ldn, .jssora02rdn
            {
            	position: absolute;
            	cursor: pointer;
            	display: block;
                background: url(images/a02.png) no-repeat;
                overflow:hidden;
            }
            .jssora02l { background-position: -3px -33px; }
            .jssora02r { background-position: -63px -33px; }
            .jssora02l:hover { background-position: -123px -33px; }
            .jssora02r:hover { background-position: -183px -33px; }
            .jssora02ldn { background-position: -243px -33px; }
            .jssora02rdn { background-position: -303px -33px; }
        </style>
        <!-- Arrow Left -->
        <span id ="arrowleft" class="jssora02l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
        </span>
        <!-- Arrow Right -->
        <span id="arrowright" class="jssora02r" style="width: 55px; height: 55px; top: 123px; right: 8px">
        </span>
        <!-- Arrow Navigator Skin End -->
        
        <!-- ThumbnailNavigator Skin Begin -->
        <div id="thumbnavigator" class="jssort03" style="position: absolute; width: 600px; height: 60px; left:0px; bottom: 0px;">
            <div style=" background-color: #000; filter:alpha(opacity=30); opacity:.3; width: 100%; height:100%;"></div>

            <!-- Thumbnail Item Skin Begin -->
            <style>
                /* jssor slider thumbnail navigator skin 03 css */
                /*
                .jssort03 .p            (normal)
                .jssort03 .p:hover      (normal mouseover)
                .jssort03 .pav          (active)
                .jssort03 .pav:hover    (active mouseover)
                .jssort03 .pdn          (mousedown)
                */
                .jssort03 .w, .jssort03 .pav:hover .w
                {
                	position: absolute;
                	width: 60px;
                	height: 30px;
                	border: white 1px dashed;
                }
                * html .jssort03 .w
                {
                	width /**/: 62px;
                	height /**/: 32px;
                }
                .jssort03 .pdn .w, .jssort03 .pav .w { border-style: solid; }
                .jssort03 .c
                {
                	width: 62px;
                	height: 32px;
                	filter:  alpha(opacity=45);
                	opacity: .45;
                	
                	transition: opacity .6s;
                    -moz-transition: opacity .6s;
                    -webkit-transition: opacity .6s;
                    -o-transition: opacity .6s;
                }
                .jssort03 .p:hover .c, .jssort03 .pav .c
                {
                	filter:  alpha(opacity=0);
                	opacity: 0;
                }
                .jssort03 .p:hover .c
                {
                	transition: none;
                    -moz-transition: none;
                    -webkit-transition: none;
                    -o-transition: none;
                }
            </style>
            <div id="slides1" style="cursor: pointer;">
                <div id="prototype" class="col_allw280" style="POSITION: absolute; WIDTH: 62px; HEIGHT: 32px; TOP: 0; LEFT: 0;">
                    <div class="col_allw280"><div id="thumbnailtemplate" style=" WIDTH: 100%; HEIGHT: 100%; border: none;position:absolute; TOP: 0; LEFT: 0;"></div></div>
                    <div class="col_allw280" style="POSITION: absolute; BACKGROUND-COLOR: #000; TOP: 0; LEFT: 0">
                    </div>
                </div>
            </div>
            <!-- Thumbnail Item Skin End -->
        </div>
        <!-- ThumbnailNavigator Skin End -->
        <a style="display: none" href="http://www.jssor.com">bootstrap carousel</a>
         <!-- Jssor Slider End -->



                       
                    </div>
<div class="col_allw280 fp_service_box col_last">
                        
                    </div>
                
                	<div class="cleaner"></div>
                </div>
				
                <div class="cleaner"></div>
            </div> <!-- end of tooplate_main -->
            
            <div id="tooplate_footer">Copyright © 2014 <a href="index.html"> Studios</a> | Design: <a href="http://www.tooplate.com">tooplate</a>
                <div class="cleaner"></div>
            </div>
        
    </div> <!-- end of forever header -->
</div> <!-- end of forever wrapper -->


</body>
</html>






Also, my slides don't move nor my thumbnails show up.

This post has been edited by swim_fan08: 10 December 2014 - 07:58 PM


Is This A Good Question/Topic? 0
  • +

Replies To: How to fix style error

#2 andrewsw   User is offline

  • Unprocessable Entity
  • member icon

Reputation: 6578
  • View blog
  • Posts: 26,724
  • Joined: 12-December 12

Re: How to fix style error

Posted 11 December 2014 - 02:40 AM

Those are HTML validator errors.

Quote

Element style not allowed as child of element div in this context.

So.. you could move the two style sections, either to the head or preferably as an external stylesheet.

I suspect that your slides aren't working because init() is executed before the element "tooplate_menu" exists on the page.



You have stylesheets but you also have a lot of inline styles applied. I suggest that you organize the styles and scripts better. Use largely external, linked, scripts and stylesheets, and attach them mostly in the head, but include the custom script (that includes references to page elements) at the bottom of the page, before the closing body-tag.
Was This Post Helpful? 0
  • +
  • -

#3 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: How to fix style error

Posted 11 December 2014 - 10:22 AM

Now my code passed the validator and image shows up. However I am still having problems getting it to slide to the next image. Is it this part
jQuery(document).ready(function ($) {
of the code that needs to go before the ending body tag?
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • Unprocessable Entity
  • member icon

Reputation: 6578
  • View blog
  • Posts: 26,724
  • Joined: 12-December 12

Re: How to fix style error

Posted 11 December 2014 - 11:27 AM

You may not appreciate my advice but, at this stage, and as you continue to struggle with this, I suggest that you find a simpler example that you can both get to work and understand.
Was This Post Helpful? 0
  • +
  • -

#5 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: How to fix style error

Posted 11 December 2014 - 03:43 PM

Believe me, I may go with something simpler here in awhile cause there are not a lot of people who like to help people when they are trying to learn something new and the people who do help feel bothered or get irritated. <_< So, I do apologize if I am wasting your time or anyone's time, sliders are new to me and learning them on your OWN is a lot harder when you've never made one. However,before I do switch to a simpler one, I want to try one more thing. I went back and re-did my whole code. I got no errors, but when I view it, my slider is off to the left and my image is missing the bottom part. When I validate my CSS I get two errors : Parse Error opacity=45) and Parse Error opacity=0). I read that it has something to do with RGBa and that I have to use
div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5); 
}

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • Unprocessable Entity
  • member icon

Reputation: 6578
  • View blog
  • Posts: 26,724
  • Joined: 12-December 12

Re: How to fix style error

Posted 11 December 2014 - 04:10 PM

I am not getting irritated ;) nor do I consider that you are wasting my time. (If I did, I wouldn't be reading.) I just think that you've started with something that is proving to be too complicated for you.



Anyway, I doubt very much that errors with opacity or background-colour are significant enough to impact the functioning of your page.

If your slider is working (you haven't said), but it is off to the left and part of an image is hidden, then I think it more likely that this requires correcting in the CSS than in the JS. Of course, there is the possibility that the CSS is being incorrectly set, or changed, by your Javascript. I can't be more specific than this given the limited information :)

If you get an error with code like this:
filter:alpha(opacity=60);

then this is an IE-specific rule and you can ignore the error.
Was This Post Helpful? 0
  • +
  • -

#7 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: How to fix style error

Posted 11 December 2014 - 04:33 PM

No, my slider is not working. My link
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • Unprocessable Entity
  • member icon

Reputation: 6578
  • View blog
  • Posts: 26,724
  • Joined: 12-December 12

Re: How to fix style error

Posted 11 December 2014 - 04:39 PM

I see a number of errors in my browser's console when I attempt to load that page, including:

Quote

Uncaught ReferenceError: $JssorArrowNavigator$ is not defined

and others like

Quote

Uncaught SyntaxError: Unexpected token <

which seem more related to your host than to your page's content.

This post has been edited by andrewsw: 11 December 2014 - 04:40 PM

Was This Post Helpful? 0
  • +
  • -

#9 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: How to fix style error

Posted 11 December 2014 - 04:53 PM

So, there is nothing I can do to fix it?
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw   User is offline

  • Unprocessable Entity
  • member icon

Reputation: 6578
  • View blog
  • Posts: 26,724
  • Joined: 12-December 12

Re: How to fix style error

Posted 12 December 2014 - 02:09 AM

Quote

Uncaught ReferenceError: $JssorArrowNavigator$ is not defined

To fix this error you need to ensure that this variable is defined before you use it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1