jquery,css,html5,seo,slider , Slidershow jquery and convert to css


Slidershow jquery and convert to css

Question:

Tag: jquery,css,html5,seo,slider

I downloaded script for slider show and it work without problems but after implemented this slide show i have problems with seo optimalization in HTML5. Because this code using this <div u=""> or <img u=""> and its still write me that i cant use this combination div with tag "u".

This is full script for slideshow:

<!-- Jssor Slider Begin -->
        <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
        <!-- ================================================== -->
        <div id="slider1_container" style="display: none; position: relative; margin: 0 auto;
        top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
            <!-- Loading Screen -->
            <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
                top: 0px; left: 0px; width: 100%; height: 100%;">
                </div>
                <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
                top: 0px; left: 0px; width: 100%; height: 100%;">
                </div>
            </div>
            <!-- Slides Container -->
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 500px; overflow: hidden;">
                <div>
                    <img u="image" src2="../img/1920/red.jpg" />
                </div>
                <div>
                    <img u="image" src2="../img/1920/purple.jpg" />
                </div>
                <div>
                    <img u="image" src2="../img/1920/blue.jpg" />
                </div>
            </div>

            <!--#region Bullet Navigator Skin Begin -->
            <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
            <style>
                /* jssor slider bullet navigator skin 21 css */
                /*
                .jssorb21 div           (normal)
                .jssorb21 div:hover     (normal mouseover)
                .jssorb21 .av           (active)
                .jssorb21 .av:hover     (active mouseover)
                .jssorb21 .dn           (mousedown)
                */
                .jssorb21 {
                    position: absolute;
                }
                .jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
                    position: absolute;
                    /* size of bullet elment */
                    width: 19px;
                    height: 19px;
                    text-align: center;
                    line-height: 19px;
                    color: white;
                    font-size: 12px;
                    background: url(../img/b21.png) no-repeat;
                    overflow: hidden;
                    cursor: pointer;
                }
                .jssorb21 div { background-position: -5px -5px; }
                .jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
                .jssorb21 .av { background-position: -65px -5px; }
                .jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }
            </style>
            <!-- bullet navigator container -->
            <div u="navigator" class="jssorb21" style="bottom: 26px; right: 6px;">
                <!-- bullet navigator item prototype -->
                <div u="prototype"></div>
            </div>
            <!--#endregion Bullet Navigator Skin End -->

            <!--#region Arrow Navigator Skin Begin -->
            <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
            <style>
                /* jssor slider arrow navigator skin 21 css */
                /*
                .jssora21l                  (normal)
                .jssora21r                  (normal)
                .jssora21l:hover            (normal mouseover)
                .jssora21r:hover            (normal mouseover)
                .jssora21l.jssora21ldn      (mousedown)
                .jssora21r.jssora21rdn      (mousedown)
                */
                .jssora21l, .jssora21r {
                    display: block;
                    position: absolute;
                    /* size of arrow element */
                    width: 55px;
                    height: 55px;
                    cursor: pointer;
                    background: url(../img/a21.png) center center no-repeat;
                    overflow: hidden;
                }
                .jssora21l { background-position: -3px -33px; }
                .jssora21r { background-position: -63px -33px; }
                .jssora21l:hover { background-position: -123px -33px; }
                .jssora21r:hover { background-position: -183px -33px; }
                .jssora21l.jssora21ldn { background-position: -243px -33px; }
                .jssora21r.jssora21rdn { background-position: -303px -33px; }
            </style>
            <!-- Arrow Left -->
            <span u="arrowleft" class="jssora21l" style="top: 123px; left: 8px;">
            </span>
            <!-- Arrow Right -->
            <span u="arrowright" class="jssora21r" style="top: 123px; right: 8px;">
            </span>
            <!--#endregion Arrow Navigator Skin End -->
            <a style="display: none" href="http://www.jssor.com">Bootstrap Slider</a>
        </div>
        <!-- Jssor Slider End -->

I tried convert style from this code to css but after that slider dont work. Because i deleted all tag "u" and i used that only "class" for style. But after it dont work.

This is css file where i try convert style from html to css but it dont work only this:

#slider1_container { 
    display: none; 
    position: relative; 
    margin: 0 auto;
    top: 0px; 
    left: 0px; 
    width: 1300px; 
    height: 580px; 
    overflow: hidden; 
}

.slider_background {
    background-position: center top;
    background-color: black;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: 100% 100%;
    width: 100%;
    height: 580px;
}

.loading {
    position: absolute; 
    top: 0px; 
    left: 0px;
}

#slider_filter {
    filter: alpha(opacity=70); 
    opacity: 0.7; 
    position: absolute; 
    display: block;
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%;
}

.slides {
    cursor: move; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 580px; 
    overflow: hidden;
}

.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
    position: absolute;
    /* size of bullet elment */
    width: 19px;
    height: 19px;
    text-align: center;
    line-height: 19px;
    color: white;
    font-size: 12px;
    background: url(../img/b21.png) no-repeat;
    overflow: hidden;
    cursor: pointer;
}

.jssorb21 div { background-position: -5px -5px; }
.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
.jssorb21 .av { background-position: -65px -5px; }
.jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }

.jssora21l, .jssora21r {
    display: block;
    position: absolute;
    /* size of arrow element */
    width: 55px;
    height: 55px;
    cursor: pointer;
    background: url(../img/a21.png) center center no-repeat;
    overflow: hidden;
}

.jssora21l { background-position: -3px -33px; }
.jssora21r { background-position: -63px -33px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21l.jssora21ldn { background-position: -243px -33px; }
.jssora21r.jssora21rdn { background-position: -303px -33px; }

#slider_image {
    position: absolute; 
    display: block; 
    background: url(../img/loading.gif) no-repeat center center;
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%;
}

Here is my website where i stil trying implemented this without html errors for seo optimalization.

OUTPUT ERRORS

VALIDATE WEB


Answer:

Please use class name instead of id to define css.

.slider1_container {
    ...
}

To pass html validation please replace u attribute with data-u.

reference: http://www.jssor.com/development/pass-html-validation.html


Related:


Set default value for struts 2 autocompleter


jquery,jsp,struts2,struts2-jquery,struts2-jquery-plugin
I have implemented a struts 2 autocompleter in which i have used a list of String like this - <sj:autocompleter id="cityId" cssClass="txtfield8" name="outlet.cityName" list="cityList" autoComplete="true" forceValidOption="false" /> How can I set a default value for this, so that every time it loads, a default value will be shown ?...

want to show and hide text using “this” jquery


javascript,jquery
I want to achieve this effect with this because I have several paragraphs like this so I don't wanna use id for each paragraph <p class="desc_services_subheading"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,...

How To Check Value Of String


javascript,css,string,numeric
<span id='amount'>0.00000000</span> <a class='button-withdraw' id='tombolco' href='#'>Checkout</a> <script> var amount = document.getElementById("amount").innerHTML; if (amount >= 0.001) { document.GetElementById("tombolco").style = "display:block"; } else { document.GetElementById("tombolco").style = "display:none"; } </script> Why my code doesn't work? What's wrong with it and how to solve it?...

why i don't get return value javascript


javascript,jquery,html,json,html5
When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

Javascript change the souce of all images present inside a string


javascript,jquery
I have a message or string which contain both text as well as images as below. var text = '<span class="user_message">hiiiiiii <img title=":benztip" src="path../files/stickers/1427956613.gif"> <img src="path../files/stickers/416397278.gif" title=":happy"></span>'; Before appending this to the the chat div i want to replace the src of the images to a default image. How can...

Top header 100% of screen, but body only 70%?


html,css
Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work. Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the...

Dynamically resize side-by-side images with different dimensions to the same height


javascript,html,css,image
I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in...

access the json encoded object returned by php in jquery


php,jquery,ajax,json
I want to post some data to php function by ajax, then get the encoded json object that the php function will return, then I want to get the information (keys and values) from this object, but I don't know how, here is my code: $.ajax({ url: "functions.php", dataType: "JSON",...

CSS :hover that shows more than one image


html,css,css3
I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

Adding horizontal space between 2 buttons using javascript


javascript,jquery,html,css
I am dynamically creating submit buttons using javascript. I wanted to know how to introduce horizontal spacing between every other button in the process. My code is var allFields = commonButtons.concat(extraFields); for (var i = 0; i < allFields.length; i++) { var node = document.createElement("input"); var btName = document.getElementById("submit-buttons"); node.setAttribute('data-value',...

Centering navbar pills vertically within the navbar using flexbox


html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

How to remove all the borders of a selectbox?


jquery,html,css,drop-down-menu
How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...

Website showing differently in windows xp and mobile


html,css
I made a website for one of my clients, and I change the background and font color. Now on windows xp and smartphones the background changed color to the default color and the fonts remained the same. The website is simfest.ro I don't know what to do to make it...

Why is JQuery index() returning 1 for the first element?


jquery
In the following line of code, a call to the index() function for the first element in a set returns 1. Why does it not return 0? var firstBlockIndex = $( '.block' ).first().index(); ...

Changing font-size of
  • on wordpress

  • css,wordpress,html-lists
    I am adding some pages on a wordpress themed website. There is a table with 3 columns: 1st column will be the title (larger font). Since it looks better and editing is easier, I started using <ul> instead of <td> Even though it works fine on JSFIDDLE font-size on the...

    slideToggle state not working with multiple boxes


    javascript,jquery,cookies
    I'm trying to save the toggle state of collapsable boxes using cookies. Here's my code: HTML: <div class="box_container"> <div class="box_handle"> Title </div> <div class="box" data-title="admin_actions"> Content </div> </div> Javascript: $('div.box_container div.box_handle').click(function() { $(this).next('.box').slideToggle('fast'); }); $.each($('div.box_container div.box_handle'), function(index,value){ if ($.cookie('show_box_' + $(value).next('.box').attr('data-title')) != 'closed'){...

    How to make background body overlay when use twitter-bootstrap popover?


    html,css,twitter-bootstrap
    Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

    Onclick add html content and remove it by clicking “delete” link


    javascript,jquery
    I have some issue, help me please to find where is the mistake. $(document).ready(function(){ $(function() { var scntDiv = $('#p_scents'); var i = $('#p_scents .row-wrap').size() + 1; $('body').on('click', '.add-item', function() { $('<div class="row-wrap cf"><div class="col-md-3 col-sm-3 col-xs-12"><input type="text" placeholder="Наименование" name="item_name' + i +'"></div><div class="col-md-2 col-sm-2 col-xs-12"><input type="text" placeholder="Количество" name="item_count' +...

    Click on link next link should be display on same page


    javascript,php,jquery,html,css3
    I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

    Setting radio button checked true on button click


    javascript,jquery,html
    I have a table cell that lights up when selected. There will be many buttons on the page but only one choice can be made at a time. How can I make them mutually exclusive using hidden input radio tags? (in order to handle the group later) <td class="choice-option"> <input...

    Dynamically increasing radio button validation


    javascript,jquery
    I have some radio buttons that dynamically increase based on data. What I want is to check if all radio button are selected or not. If they're not, I want to show an error message on that particular row as I am using form substitution to send data to ajax....

    Background-image style with JS not working in ie9


    javascript,jquery,html,internet-explorer
    I'm working on a site and im having some issues with my slider in IE9. What I've done is that I've made a div that gets the background image changed every few seconds depending on the img tags within. You can see it in function here: http://diakondk.quine.pil.dk/ It works wonders...

    Get elements containing text from array


    javascript,jquery,html,arrays,contains
    I want to search all the elements containing any string in the array. For example I have following list of items <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li> <li>hockey stick</li> </ul> and this array var arr = ['bat', 'ball']; It should select all the elements having text bat and ball....

    Google map infowindow position on custom marker


    javascript,css,google-maps,google-maps-api-3
    I'm not using the Markers in Google Maps because I wish to render custom text and images on my marker, so what I did is a custom marker using Overlays. The Overlay position is not exactly like the marker so I played a bit with it and now it is...

    Identifier starts immediately after numeric literal


    jquery,ajax,razor
    I'm trying to get the current logged in usersID in my jquery function var userID = @User.Identity.GetUserId(); Many answers on this page say that I have to do something like \"@User.Identity.GetUserId()\" But it dont seem to work, can someone tell me how to fix it. Its for my ajax post....

    Parsing XML array using Jquery


    javascript,jquery,xml,jquery-mobile
    I have stuck up with an issue of passing XML using Jquery. I am getting empty array while traversing to jquery.Please help me how to get datas from XML array. I have mentioned my code below. XML <?xml version="1.0" encoding="UTF-8"?> <json> <json> <CustomerName>999GIZA MID INSURANCEAND SERVICES PVT LTD</CustomerName> <mobiLastReceiptDate>null</mobiLastReceiptDate> </json>...

    How to remove legend from bottom of chart - amcharts


    jquery,linechart,amcharts
    Can you please help me out to remove the legend (of y-axis data) from the below the line-chart. This is the icon that helps to remove the corresponding line from the line-chart. See inline image...

    show div only when printing


    javascript,html,css
    Let's say that I have <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> Is it possible to hide this div when page rendering and to show only when printing this div?...

    How to send current page number in Ajax request


    javascript,jquery,ajax,spring-mvc,datatables
    I am using jQuery DataTable to display huge amount of data in a table. I am getting data page wise on Ajax request like this: var pageNo = 1; $('#propertyTable').dataTable( { "processing": true, "serverSide": true, "ajax": "${contextPath}/admin/getNextPageData/"+pageNo+"/"+10, "columns": [ { "data": "propertyId" }, { "data": "propertyname" }, { "data": "propertyType"...

    bootstrap - dynamically changing jumbotron background image


    javascript,jquery,html,css,bootstrap
    I'm trying to change the background image of the jumbotron div with jQuery when a new tab is clicked, like this: $(".about").click(function(){ $('.active').toggleClass('active'); $('.about').toggleClass('active'); $('.jumbotron').fadeOut(500); //change background image $('.jumbotron').fadeIn(500); }); I tried using $('.jumbotron').css('background-image',url('/path/to/new/image')); but when I include that line, the jumbotron background image doesn't display at all even before...

    How to remove unmatched row in html table using jquery


    jquery,html
    I have two tables. I want to delete unmatching rows. Compare with first column in Table1 and compare with first column in Table2. Table1 111 aaa 222 bbb 333 ccc Table2 333 xxx 444 zzz 111 vvv result of Table2 333 xxx 111 vvv I tried some thing here Please...

    copy last column of one table to another table based on some condition


    jquery,html
    I have two tables. I want to take last column of table3 and put in to table4 eg:- table3 Names Process_id total construction 1 1111 construction_1 1 0000 engineering 1 2222 permitting 1 3333 eg:- table4 Names Process_id construction 1005 engineering 1005 permitting 1005 final result of table4 output will...

    writing jQuery instead of $ to access controls in a page


    jquery
    Can I write jQuery( "body" ).append('Hello') instead of $( "body" ).append('Hello') in jQuery

    CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds


    html,css,css3
    I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

    Target next instance of an element/div


    javascript,jquery,html
    I have the following HTML structure and JavaScript file: .html <li> <button class="show-more"></button> some more elements <div class="hidden"></div> </li> JavaScript $( ".show-more" ).click(function() { event.preventDefault(); $( this ).next().slideToggle( "fast", function() { }); }); I need the click event to toggle the next first instance of .hidden, however the click event...

    tag in HAML


    html,css,haml
    How do I create a I-tag in haml? Example: <i class="fa fa-search"></i> ...

    Converting “i+=n” for-loop to $.each


    javascript,jquery
    I have the below html structure: <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> Now to group/wrap each 4 items in a separate div I did as below: var div=$('.thumbnail'); for(var i = 0; i < div.length; i+=4) { div.slice(i, i+4).wrapAll("<div...

    change css dynamically by selecting dropdown list item


    jquery,html,css,drop-down-menu
    I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...

    How to find the days b/w two long date values


    javascript,jquery,date
    I have two long dates value. For Ex: 1433097000000 1434479400000 Here i have to find the days between these two by jquery For Ex: 15/06/2015 - 22/06/2015 If it is more than 5 days, I want to get from is 15/06/2016, to is 19/06/2015. It is based on long values...

    show/hide an overflow div on anchor


    javascript,jquery,html,scroll
    I'm trying to make a div appear (if not already visible) and be scrolled to a specific anchor. I found this answer and try to use it but it looks like it doesn't work well... http://stackoverflow.com/a/7513110/3703099 My code : http://jsfiddle.net/0sq2rfcx/9/ As you can see, when you click on button it...

    Javscript Replace Text in tags without changing children element HTML and Content


    javascript,jquery
    I have a script where I'd like to replace the text anywhere in the body visible to the user like so: $("body").html($("body").html().replace(/replaced word/g,'HELLO')); This works but it works to well. Whenever "replaced word" is within a tag, like a href, or span, or div, or anything it throws off all...

    How to set DIV's width based on CSS indexes


    html,css
    I have 6 floated DIVs in two rows. I use PocketGrid as CSS framework (in particular its "automatic rows" feature) and I would like to size each one using CSS indexes and not specific class name. I tried it in this jsFiddle but even if first 3 blocks (first row)...

    Div with the form of a pencil [duplicate]


    html,css,css-shapes
    This question already has an answer here: CSS triangle custom border color 2 answers How can i create a div with the form of a pencil, just like this: It seems a basic thing but im trying to do it since some time ago and still couldnt do it....

    Detect when the jQuery UI slider is being moved?


    jquery,html,css,jquery-ui
    I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to...

    HTML CSS Two 2-column tables side by side with same height and width


    html,css
    I'm quering a MySQL database and use a script to put results into an automatically generated HTML-file. I have two tables with 2 columns and 4 rows each that need to be put side-by-side. I have put my html & css in fiddle. http://jsfiddle.net/mika6891/7b0k049r/1/ My HTML code: <!-- gene description...

    Rerendering Handlebars template upon data change


    jquery,handlebars.js
    I have a template that shows a button based on some boolean in a JSON-object. There are two different buttons it can show. The code for compiling the template: source = $('#some-template').html(); // Get the HTML source of the template template = Handlebars.compile(source); // Compile it $('#some-div-container').html(template(someJsonObject)); Let's say the...