Search the Community

Showing results for tags 'dropdown'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 25 results

  1. Hi, Need some CSS help regarding SubMenu creation. I have this below code for responsive Main Menu which is working fine. I need to create a SubMenu under the main menu. For example :- Menu2 will habe two submenu like Menu2_SubMenu1 & Menu2_SubMenu2. The color, format and hovering effect will be same like Main menu. Can you kindly help me out with the CSS for the same. I am messing up with the Submenu CSS code code. Thanks in advance for your help. Regards, Ari. Here is the WORKING code where I would like to include sub-menu.( for example under **Menu2**). <!DOCTYPE html> <html> <head> <style> body { margin: 0; } ul.topnav { list-style-type: none; margin: 0px; padding: 0; overflow: hidden; background-color: #2D5C88; text-align: center; /* For fixed header */ position: fixed; width: 100%; z-index: 1000; } ul.topnav li { display: inline; } ul.topnav li a { display: inline-block; color: #fff; text-align: center; padding: 8px 30px 8px 30px; text-decoration: none; transition: 0.3s; font-size: 13px; font-family: 'Verdana', Geneva, sans-serif; } ul.topnav li a:hover { background-color: #33699b; } ul.topnav li.icon { display: none; } @media screen and (max-width:680px) { ul.topnav li:not(:first-child) { display: none; } ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive { position: relative; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } </style> </head> <body> <ul class="topnav" id="myTopnav"> <li><a class="active" href="">Menu1</a></li> <li><a href="">**Menu2**</a></li> <li><a href="">Menu3</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> </ul> </body> </html>
  2. <html> <head> <script type="text/javascript"> function CheckColors(val){ var element=document.getElementById('color-test'); if(val=='pick a color'||val=='others')'block'; else'none'; } </script> </head> <body bgcolor='lime'> <div style="margin-left: 400px; margin-top:100px; width: 200px; height: 200px; border: solid blue 1px; display: inline-block; float: left;"> <p style=""> name </p> <p style=""> ball </p> <p style=""> color </p> </div> <div style="margin-left: 50px; margin-top:100px; width: 200px; height: 200px; border: solid blue 1px; display: inline-block; float: left;"> <p><input type ="text" ></p> <p><input type ="text" ></p> <select name="color" onchange='CheckColors(this.value);'> <option>pick a color</option> <option value="red">RED</option> <option value="blue">BLUE</option> <option value="others">others</option> </select> <p><input type="text" name="color" id="color-test" style='display:none;'/></p> </div> </body> </html> I created an example script of a situation I would like to solve. There are 2 divs. The right div receives an extra input field when onChange detects an event. In the left div there should also be a new html element like <p>. How can I program this with javascript?
  3. Hi Everyone. I would like to create a dropdown list with the features described below and have played around with various existing code on the web, however, I thought it would be wise if I found out first if my aim is even possible to start with before exerting any further effort on something that has no chance of working. My knowledge on the subject is very limited; I am familiar with basic HTML and am able to modify/combine some code from existing examples/demos. I am posting in the JavaScript section of the forums as I presume that JavaScript will be necessary. The features I have described below are all that I require; I don't need a whole bunch of 'options' to change things around. I have composed a picture (attached) to help show what I wish to achieve and have provided some explanatory notes below. SECOND BOX: List of all items available in alphabetical order. List items visible upon loading. Vertical scroll bar, as there will be hundreds of items in the list. Each list item can be quite long so box should be wide enough, however, horizontal scroll bar if necessary; no text wrapping, only one item per line. FIRST BOX: Field to type search terms into. No minimum number of characters. As soon as a single letter is typed in the box, all items that 'contain' (not only start with) that letter are revealed in the second box. Pressing backspace to delete a letter increases the list in the second box again. Letters typed are emboldened in the second box; no highlighting, underlining or other emphasis. AREA UNDER SECOND BOX: Single-clicking an item in the second box removes that item from the second box and displays a block of four or three lines of text relating to that item underneath the second box. Clicking on another item in the second box removes it from the second box and displays its corresponding block of text underneath the first block of text, i.e. in the order it was selected and NOT in the order that it originally appeared in the second box. Single-clicking a block of text removes it from the area under the second box and displays its corresponding item in the second box again in its original (alphabetical) position. I think I would prefer the blocks of text to be in a free area under the second box and not boxed in, however, I am not 100% sure of this and would consider a third box. ADDITIONAL: Must work in IE8 and IE9 and compatibility with other versions/browsers would be a bonus. Must allow being maintained in the long term. Speed is very important and whatever method/language/code is used needs to load as fast as possible with its features/functions responding as quickly as possible. Note that the picture shows everything just for illustrative purposes. Of course, in an actual working example, in this instance, if 'Fruits' and 'Nuts' were displayed in the second box, the area under the second box would be blank and if the area under the second box displayed the two blocks of text, the second box would be blank. So, my questions are: Is the above possible? If yes, would anyone be kind enough to point me in the right direction, i.e. advise me on which language/type of code would be most suitable for this task. Any links to similar examples/demos would be very much appreciated! Most avenues I've come across seem to lead to JQuery! Is my task not possible without dependencies on JQuery or other/external scripts? Am I correct to assume that if I wanted everything to be hard-coded, I would require a LOT of knowledge? Any advice would be appreciated. Thanks.
  4. Hi, I am having some problem while creating a mega dropdown menu. I want the mega-dropdown-content to be divided to 4 column and 3column will be for the menu and rest 1 column will be for an image. But this is not the expected result. Here is the code. Please tell how can I fix it? Thank you. <!DOCTYPE html> <html> <head> <link rel= "stylesheet" href= "mega%20menu%20copy%20copy.css"/> <link rel= "stylesheet" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style> .menu-container, .mega-menu, .nav, .nav li, .nav a, .nav div{ margin: 0; padding: 0; border: none; outline:none; } .nav { position: relative; } .nav a { text-decoration: none; } .nav li { list-style: none; } a { color: white; } .menu-container { position: relative; width: 100%; } .mega-menu { position: absolute; width: 48%; left: 26%; height: 40px; background-color: red; } .nav > li { display: inline-block; height: 40px; font-size: 20px; font-weight: bold; } .nav > li > a { display: block; padding: 10px 10px; color: white; text-align: left; vertical-align: center; margin-bottom: 10px; } .mega-menu-content, .dropdown { padding-top: 60px; position: absolute;; width: 100%; display: none; background-color: white; color: black; font-size: 16px; border: 2px solid lightgrey; } .mega-menu-content > ul > li:first-child,.dropdown > ul >li:first-child { padding-top: 10px; } .mega-menu-content > ul> li, .dropdown > ul > li { display: block; min-width: 120px; min-height: 40px; margin: 0; padding: 0; } .mega-menu-content > ul > li > a, .dropdown > ul > li > a { color: red; font-size: 16px; min-width: 120px; padding: 8px 10px; border: 1px solid lightgrey; } .mega-menu-content { column-count: 3; column-width: 33%; column-gap: 0; } .mega-menu-content > ul > li > a:hover, .dropdown > ul > li > a:hover { background-color: lightgrey; } .nav > li:hover .mega-menu-content, .nav > li:hover .dropdown{ display: block; } </style> </head> <body> <div class= "menu-container"> <div class= "mega-menu"> <ul class= "nav"> <li><a href= "#">Home</a></li> <li><a href= "#">Clothing <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class= "mega-menu-content"> <ul>Men<hr/> <li><a href= "#">T-shirts</a></li> <li><a href= "#">Shirts</a></li> <li><a href= "#">Pants</a></li> <li><a href= "#">Shoes</a></li> <li><a href= "#">Sunglasses</a></li> <li><a href= "#">Caps</a></li> <li><a href= "#">Jewelry</a></li> <li><a href= "#">Others</a></li> </ul> <ul>Women<hr/> <li><a href= "#">Jewelry</a></li> <li><a href= "#">Coats & Jackets</a></li> <li><a href= "#">Tops & Blouses</a></li> <li><a href= "#">Intimate & Sleep</a></li> <li><a href= "#">Jeans</a></li> <li><a href= "#">Pants</a></li> <li><a href= "#">Skirts</a></li> <li><a href= "#">Sweaters</a></li> </ul> <ul>Others<hr/> <li><a href= "#">Boys</a></li> <li><a href= "#">Girls</a></li> <li><a href= "#">Baby</a></li> <li><a href= "#">Luggage</a></li> </ul> <ul>From Popular Sites<hr/> <li><a href= "#">Amazon</a></li> <li><a href= "#">Ebay</a></li> <li><a href= "#">Etsy</a></li> <li><a href= "#">Shoppify</a></li> </ul> <img src= "#" height= "100px" width= "100px" style= "float: right;"/> </div> </li> <li><a href= "#">Products <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class= "mega-menu-content"> <img src= "#" height= "100%" width= "25%" style= "float: left;"/> <hr/> <ul>Electronics & Computers<hr/> <li><a href= "#">TV & Video</a></li> <li><a href= "#">Cellphone & Camera</a></li> <li><a href= "#">Head Phones</a></li> <li><a href= "#">Video Games</a></li> <li><a href= "#">Computers & Tablets</a></li> <li><a href= "#">Monitors</a></li> <li><a href= "#">Schools & Office Supplies</a></li> <li><a href= "#">Trade In Your Electronics</a></li> <hr/></ul> <ul>Health & Beauty<hr/> <li><a href= "#">All Beauty</a></li> <li><a href= "#">Luxury Beauty</a></li> <li><a href= "#">Specialty Diets</a></li> <li><a href= "#">Health,Household & Baby care</a></li> <li><a href= "#">Coupons</a></li> <hr/></ul> <ul>Sports & Outdoors<hr/> <li><a href= "#">Athletic Clothing</a></li> <li><a href= "#">Exercise & Fitness</a></li> <li><a href= "#">Hunting & Fishing</a></li> <li><a href= "#">Team Sports</a></li> <li><a href= "#">Cycling</a></li> <li><a href= "#">Water Sports</a></li> <li><a href= "#">Winter Sports</a></li> <li><a href= "#">All Sports</a></li> </ul> </div> </li> <li><a href= "#">Gifts <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class="dropdown"> <ul> <li><a href= "#">Games</a></li> <li><a href= "#">Books</a></li> <li><a href= "#">Show Piece</a></li> <li><a href= "#">Kids Birthday</a></li> </ul> </div> </li> <li><a href= "#">Arts & Crafts</a></li> <li><a href= "#">Services</a></li> </ul> </div> </div> </body> </html>
  5. Hi there, I just recently started using w3.css and was looking for some code template for a navigation bar, that is responsive. Here on your website there is just one useful suggestion for a collapsing navigation bar (near the end). Sadly this didn't help me with a navigation bar, which has a dropdown element, since these links won't be displayed on small devices (especially since hovering is not supported on most respective devices). So I made a few alterations based on the try it code (original code here) to make it work. I wanted to post my modifications here so, if you think they are useful, they might be implemented as another code snippet for orientation on the w3.css navigaton page. Hope you enjoy, if not so be it my code: <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <body> <ul class="w3-navbar w3-large w3-black w3-hide-small"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="w3-dropdown-hover"><a href="#">Dropdown Hover</a> <div class="w3-dropdown-content w3-card-4"> <a href="#">Sublink 3a</a> <a href="#">Sublink 3b</a> <a href="#">Sublink 3c</a> </div> </li> </ul> <a class="w3-center w3-hide-medium w3-hide-large" href="#" onclick="myFunction()"> <div class="w3-black" style="padding: 8px 16px"> ☰ </div> </a> <div id="demo" class="w3-hide w3-hide-large w3-hide-medium"> <ul class="w3-navbar w3-left-align w3-border-top w3-large w3-black"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Dropdown Hover</a> <ul class="w3-navbar w3-left-align" style="padding-left: 15px;"> <li><a href="#">Sublink 3a</a></li> <li><a href="#">Sublink 3b</a></li> <li><a href="#">Sublink 3c</a></li> </ul> </li> </ul> </div> <div class="w3-container"> <p>In the example below, the navigation bar is replaced with a button (☰) in the center when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed stacked. Dropdown Menus will be displayed, since mobile devices don't support hovering.</p> <p>Resize the screen to see the effect.</p> </div> <script> function myFunction() { var x = document.getElementById("demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> Peace and love
  6. Hello, Having some issues with this Given I'm trying to replace the first column from input to select dropdown but having trouble figuring out how to read the data for each cell. It was working fine with an input and normal td but now the select entered the picture and it's skipping one column. The day drop-downs are for newly added rows currently. This is how I'm trying to read the data, maybe I'm missing something essential here $ () { var $rows = $TABLE.find('tr:not(:hidden)'); var $tds = $TABLE.find('td:not(:hidden)'); var headers = []; var data = []; // Get the headers (add special header logic here) $($rows.shift()).find('th:not(:empty)').each(function () { headers.push($(this).text().toLowerCase()); }); // Turn all existing rows into a loopable array $rows.each(function () { var $td = $(this).find('td'); var $td2 = $td.find('input'); var $td3 = $td.find('select'); var h2 = {}; // Use the headers from earlier to name our hash keys headers.forEach(function (header, i) { // h2[header] = $td.eq(i).text(); //the dropdown value -> //console.log($td3.eq(i).val()); h2[header] = $td3.eq(i).val(); if ($td3.eq(i).val() === undefined){ // it's not dropdown ? read it normaly.. console.log(i); h2[header] = ($td.eq(i).text() == '') ? $td2.eq(i).val() : $td.eq(i).text(); } //console.log(h2[header]); }); data.push(h2); }); // Output the result $EXPORT.text(JSON.stringify(data)); });
  7. This is an example working with optgroup. <form action="#" ><SELECT name="rubsel" class="btn"><?php$tmp=0;while($row = $result->fetch_assoc() ) {$reeks = implode(" " , $row); ?> <optgroup ="btn" label = "<?php echo $reeks; ?>" ><?php echo $reeks ;$tmp ; ?><option class="btn" name="rub_sub1" value="<?php echo $reeks; ?>">1 t/m 10 </option><option class="btn" name="rub_sub2" value="<?php echo $reeks; ?>">11 t/m 20 </option><option class="btn" name="rub_sub3" value="<?php echo $reeks; ?>">21 t/m 30 </option><option class="btn" name="rub_sub4" value="<?php echo $reeks; ?>">31 t/m 40 </option></optgroup><?php $tmp++;}?></SELECT><br><br><input type="submit" class ="btn" name ="tab_wrd" value="Kies Rubriek" /> <br><br></form> What i would like to know is how the input is being processed when using php. Especially how to find exactly the value of <option> The Select name input is found and echoed but what if I put a name attribute in the option element? I cant get an output of that. Or is there another way to get the option value with other attributes for instance?
  8. So my goal is now to have a table list read from the database. The content of the table is supposed to be put in an <SELECT> <OPTION VALUE> form for a dropdown menu having the user select only 1 value. $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "SHOW TABLES"; if (!$result = $conn->query($sql)){ die('There was an error running the query[' .$conn->error. ']'); } foreach($row = $result->fetch_assoc()){ echo "<center>"; $reeks = implode(" " , $row); // echo $reeks; // echo "<br>"; echo "</center>"; ?> <center> <form name = "inpform" method="post" action="Add-succ7.php"> <SELECT > <option value = "<?php echo $reeks; ?>" > </option> </SELECT> </center> <?php } mysqli_close($conn); ?> Do I have to do this with foreach or while? (or something else?) In the checkbox version I use while but when doing that I get a list of 8 checkboxes without any value. I see the dropdown menu is placed in the loop of while so another condition (like foreach) seems to be the first thing to think about. But what kinda solutions would you have for the script above?
  9. Hi, I'm quite new to bootstrap and not an expert HTML/CSS coder either, but I'm hoping to learn more. The first problem I've encountered is the dropdown menu. I'm basically not able to open it up, even if I'm using the example provided on w3schools. This is the code I'm using, can anyone see why it's not opening up? <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Home <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">CV</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
  10. Hey , I have a problem with the positioning of my dropdown menu .. All is working fine but when I hover with my mouse the dropdown doesn't paste the initial menu . If someone could help me <html> <head> <style> #nav ul{ display: table; margin: 100px auto; width:700px; padding: 0px; font-size:25px; font-weight:bold; background: Gray; background: -webkit-linear-gradient(Gray, DarkGray); background: -moz-linear-gradient(Gray, DarkGray); background: -ms-linear-gradient(Gray, DarkGray); background: -o-linear-gradient(Gray, DarkGray); background: linear-gradient(Gray, DarkGray); border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); } #nav ul li{ display:table-cell; } #nav ul li a{ display: block; text-align: center; color: rgba(0, 0, 0, .7); padding: 8px 8px 17px 8px; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); box-shadow: 0 1px 0 rgb #A9A9A9 inset, 0 -1px 0 hsl(210, 100%, 32%) inset, 0 -2px 0 hsl(210, 100%, 38%) inset, 0 -3px 0 hsl(210, 100%, 44%) inset, 0 -4px 0 hsl(210, 100%, 50%) inset, 0 -5px 0 hsl(210, 100%, 60%) inset; } #nav .divider-vertical{ border-right: 1px solid grey; } #nav .elem { display:none; position:absolute; width:inherit; } #nav .elem li{ background:#262626; display:block; text-align:center; } #nav .elem a{ color: white; font-size:25; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); } #nav li:hover > .elem{ display:block; } </style> </head> <body> <div id="nav"> <ul> <li><a href="#">a</a></li> <li class="divider-vertical"></li> <li><a href="#">b</a></li> <li class="divider-vertical"></li> <li><a href="#">c</a></li> <li class="divider-vertical"></li> <li><a href="#">d</a> <ul class="elem"> <li><a href="#">d1</a></li> <li><a href="#">d2</a></li> <li><a href="#">d3</a></li> </ul> </li> </ul> </div> </body></html>
  11. Let's try this again... I'm using 2 radio buttons and a drop down. what I want is to send the user to one of 6 urls when they hit submit. radio buttons: -Fairy Goddess -Inner Warrior drop down : -Young Adult -20 Something -30 and up Possible outcomes: 1. Fairy Goddess - Young Adult -->url 2. Fairy Goddess - 20 Something -->url 3. Fairy Goddess - 30 and up -->url 4. Inner Warrior - Young Adult -->url 5. Inner Warrior - 20 Something -->url 6. Inner Warrior - 30 and up -->url here's my NEW code: <form action="/html/tags/html_form_tag_action.cfm" method="get"><fieldset><div><label for="guide">Choose Your Guide</label><br><input type="radio" name="guide" value="fairygoddess" /> Fairy Goddess<input type="radio" name="guide" value="innerwarrior" /> Inner Warrior</div><div><label for="age">Choose your Age Group:</label><br><select name="age"><option value ="youngadult">Young Adult</option><option value ="20something">20 Something</option><option value ="30andup">30 and up</option></select></div><div><input type="submit" value="Submit" /></div></fieldset></form>
  12. I am new to Javascript so please be patient. Here I have two dropdown lists each with an alert to display the list selection. My code is a duplicated adaptation of a w3schools example.Both alert messages show selections from the "keyName" list because (I assume) both alert messages use getElementsByTagName("option").if I put the variables keyN and keyT alone in the alert functions they display the expected selection index numbers. Is there a way to link 'option' to 'select id' that forces the correct list to be read? Or perhaps another way to approach the task?Thanks in advance for any advice.codeblock<!DOCTYPE html><html><body>//List#1<select id="keyName"><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>//List#2<select id="keyType"><option value="major">major</option><option value="minor">minor</option></select><button type="button" onclick="getKey()">Get Key</button> //displays C/D/E/F<button type="button" onclick="getType()">Get Type</button> //displays C/D<script>function getKey() { var keyN = document.getElementById("keyName").selectedIndex; alert(document.getElementsByTagName("option")[keyN].value);}function getType() { var keyT = document.getElementById("keyType").selectedIndex; alert(document.getElementsByTagName("option")[keyT].value);}</script></body></html>/codeblock
  13. I have a working drop down menu almost perfectly styled. It functions however I want the submenus to appear in column rows not straight down. Here is my current HTML and CSS. Thanks in advance! <div id="navbar"> <ul id="dropdown"> <li class="topnav"><a href="#">Item One</a> <ul> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> </ul> </li> </ul></div> #navbar { width: 100%; border-bottom: 1px solid #ccc; padding: 10 10 10 10; }#dropdown { width: 960px; margin: 0 auto; padding: 0; height: 1em; text-transform: uppercase; text-align: center; font-weight: bold; }#dropdown li { list-style: none; float: left; }#dropdown li a { display: block; padding: 3px 8px; text-decoration: none; }#dropdown li ul { display: none; width: 10em; /* Width to help Opera out */ background-color: #fff; } #dropdown li:hover ul, #navbar li.hover ul { display: block; position: absolute; margin: 0; padding: 0; border-bottom: 1px solid #ccc; }#dropdown li:hover li, #navbar li.hover li { float: none; }#dropdown li:hover li a, #navbar li.hover li a { background-color: #fff; color: #000; }.topnav a { color: #000; text-decoration: none; }.topnav a:hover { border-bottom: 1px solid gold; }.column {list-style-type: none;float: right;margin: 5px 0 0 0;padding: 0 5px 0 0;width:180px; }.column a { color: #999; text-decoration: none; font-size: .7em; }.column a:hover { border-bottom: 0px; }
  14. HTML <!DOCTYPE html><html><head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="css/style_v2.css"> <title>Far Far Away - A folktale at Faraway Island</title></head><body> <header> <div id="logonslogan"> <a href="#">Well-Designed Blog</a> <p id="slogan">Created by Terry</p> </div> <div id="navnsearch"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a> <ul> <li><a href="#">Wordpress Theme</a></li> <li><a href="#">Blogger Theme</a></li> </ul> </li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav> <section id="search"> <form action="#"> <input type="search" name="search" id="site_search" placeholder="Enter keywords"> <input type="submit" class="button" id="submit_search"> </form> </section> </div> </header> <section id="categories"> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> </section> <section id="blog_posts"> <article> <header> <h1>Far far away</h1> <p>Published <time datetime="2013-12-26 pubdate">December 26, 2013</time> by dummytext</p> </header> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. </p> <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p> <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p> <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p> <section id="comments"> <h2>Comments</h2> <a class="count">1 comment</a> <ul class="commentlist"> <li class="comment" id="comment_id1"> <div class="thiscomment"> <div class="box"> <img src="images/ava.gif" alt="user1avatar" class="ava"> <h3>User1</h3> <p class="datetime_comment"> <time datetime="2013-12-27" class="date"> December 27, 2013 </time> <span class="time"> 11:33 </span> </p> <div class="commentcontent"> <p>I really enjoyed seeing stories in this site. Keep up the good work !<br> Regards, <br> User1 </p> </div> </div> <div class="toolbar"> <a href="#">Vote Up</a> <a href="#">Vote Down</a> <a href="#">Share</a> </div> </div> </li> </ul> </section> </article> </section> <div id="rightcontent"> <section id="popularPosts"> <hgroup> <h2>Popular posts</h2> <h3>See popular post</h3> </hgroup> <ul class="popularpostslist"> <li class="popularpost"> <img src="images/ava.gif" alt="Lorem Ipsum's post image"> <h4>Lorem Ipsum</h4> <p class="datetime"> <time datetime="2013-12-27">December 27, 2013</time> <span class="time">11:46</span> </p> <p>Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis... <span class="readmore">Read More</span> </p> </li> <li class="popularpost"> <img src="images/ava.gif" alt="postimg"> <h4>Lurem Ipsam</h4> <p class="datetime"> <time datetime="2013-12-27">December 27, 2013</time> <span class="time">11:46</span> </p> <p>Tatarwags traf as aina Copy. Dia Copy warnta das Blindtaxtchan, da, wo sia harkäma wära sia zigmal umgaschriaban wordan Tad allas, was von ihram UrsprTag noch übrig wära, sai das Wort "Tad" Tad das Blindtaxtchan solla umkehren Tad wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen Tad so dauerte es nicht lange, bis... <span class="readmore">Read More</span> </p> </li> </ul> </section> <section id="trendingtopics"> <hgroup> <h2>Trending Topics</h2> <h3>See what's booming now</h3> </hgroup> <ul id="trendinglist"> <li class="trending"><a href="#">#LoremIpsum</a></li> <li class="trending"><a href="#">#FarFarAway</a></li> <li class="trending"><a href="#">#KingKnights</a></li> <li class="trending"><a href="#">#DummyMummy</a></li> <li class="trending"><a href="#">#Wallball</a></li> </ul> </section> </div> <footer class="clear" id="footer"> <p>All contents are hand-wroten by <a href="">Terry DS</a></p> <small>All Rights Reserved, 2013 Terry DS©</small> </footer></body></html> CSS /* Eric Meyer's Reset CSS v2.0 - */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}/* The author stylesheet */body { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Liberation Sans", Verdana, sans-serif; background-color: #E8E8E8;}a { color: inherit; text-decoration: none;}h1 { font-size: 200%;}h2 { font-size: 150%;}h3 { font-size: 133%;}h4 { font-size: 120%;}h5 { font-size: 110%;}body > header { background-color: #333333; position: relative; overflow: hidden;}body > header a, body > header p { color: #FFFFFF;}#logonslogan { float: left;}#navnsearch { background-color: #990100; float: right; width: 55%; overflow: hidden; position: relative;}#navnsearch nav ul { list-style: none; padding: 0 3%; display: inline-table;}#navnsearch nav ul:after { content: ""; clear: both; display: block;}#navnsearch nav ul li { float: left;}#navnsearch nav ul li a { display: block; padding: 1em; margin: 1em; text-align: center;}#navnsearch nav ul li:hover { background-color: #B90504; background-color: rgba(0,0,0,.3);}#navnsearch nav ul li:hover a { box-shadow: 0 0 3px 2px; -webkit-box-shadow: 0 0 3px 2px; -moz-box-shadow: 0 0 3px 2px; border-radius: 50%;}#navnsearch nav ul ul { display: none;}#navnsearch nav ul li:hover > ul { display: block;}#navnsearch nav ul ul { position: absolute; top: 100%;}#navnsearch nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative;}#navnsearch nav ul ul li a { padding: 15px 40px; color: #fff;} #navnsearch nav ul ul li a:hover { background: #4b545f;}#navnsearch nav ul ul ul { position: absolute; left: 100%; top:0;}#navnsearch #search { position: absolute; bottom: 0; right: 2em;}#navnsearch #site_search { padding: .5em;} I made the second unordered list not displayed (display: none), then when i hover the list item of the first unordered list, i want the second unordered list to be display so i give nav ul li:hover > ul { display:block; } But, it doesn't work... The second ul is not displayed when i hover the list item of the first unordered list... Please help me solve the problem...
  15. Good day! how can i get rid of those extra space on my dropdwon menus? (see attachment) any ideas? thanks a lot! Cheers! neways heres my code <div class="nav"> <ul> <li>Contacts</li> <li>e-Book</li> <li>Blog</li> <li>Projects <ul> <li>On-going Projects List</li> <li>Completed Project List</li> <li>Project Gallery</li> </ul></li> <li><a href="services.html">Our Services</a> <ul> <li>Industrial Commercial Residential</li> <li>Supply and Installation</li> </ul> </li> <li><a href="about.html">About Us</a> <ul> <li><a href="general.html">General Information</a></li> <li>Organizational Chart</li> <li>Executive Team</li> <li>Business Objective</li> <li>Affiliate</li> <li>Vehicles & Equipment</li> <li>Contractor Liscense</li> <li>Commendations</li> <li>Bonding Capability</li> <li>Location Map</li> <li>Career</li> <li>Testimonial</li> </ul></li> <li><a href="index.html">Home</a></li> </ul> </div> .nav{ padding-top: 50px; margin-right: 10%; color:#666; text-decoration: none; } .nav ul li{ float:right; display: inline-block; text-decoration: none; padding: 10px; }.nav ul li a:link{ text-decoration:none; color:#333;}.nav ul li:hover{ color:#fad814; }.nav ul li a:active{ color: #fad814;}.nav ul li a:visited{ color: #666;}.nav ul ul { visibility: hidden; position: absolute; top: 120px; display: block; background-color: #444; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; transition: all .2s ease-in-out; padding-bottom:1px; margin: 10px 0px 0px 0px;}.nav ul li:hover > ul { opacity: 1; visibility: visible; margin:0px; z-index: 30; display: block; }.nav ul li ul li{ margin-left: 0px; list-style:none; text-decoration:none; float:none; display: block; border: 0; box-shadow: 0 1px 0 #111, 0 2px 0 #666; color: white;}.nav ul li ul li:hover{ background-color:#FC0; color:white; }.nav ul li ul li a:visited{ color: white !important;}.nav ul li ul li:first-child{ border-top-right-radius:5px; -moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px;}.nav ul li ul li:last-child{ border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; box-shadow: 0 0px 0 #111, 0 0px 0 #666;}.nav ul li ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;}
  16. Hey I've got a problem with fireing a change-event manually.So I have a selectOneMenu (i'ts like a dropdown in jsf) with different values.If I choose a value of this dropdown-list, a datatable should be updated. This works correctly, if i choose this value manually.Now there is a case, where I need to insert a new value to the selectOneMenu. This new value gets selected automatically, but the change-event to update the datatable doesn't get fired...So basically I have this button to save a new value to the selectOneMenu which then gets selected correctly, but the datatable doesn't get updated, which is why I tried to write the function fireChange() and gave that to the oncomplete of the button: <p:commandButton ajax="true" id="seatingPlanSave" actionListener="#{EventAssistentController.createSeatingPlan}" value="#{}" update=":createEvent:EventSeatingPlan, :createEvent:ticketTypePrices"oncomplete="fireChange()"/> For the fireChange()-function, i tried a few different things: function fireChange() { var element = document.getElementById("createEvent:EventSeatingPlan_input");element.onchange();} function fireChange() {var element = document.getElementById("createEvent:EventSeatingPlan_input");$(element).trigger("change");} function fireChange() {if ("fireEvent" in element) element.fireEvent("onchange");else { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); element.dispatchEvent(evt);} But none of these work :(Can you please tell me how I can achieve this?Thanks, Xera
  17. I'm trying to create a dropdown menu effect here I'm stuck with how to get the menu items under the "about" menu item to stack vertically like a standard dropdown. Here's the CSS: #mainNav { margin: 82px 0 0 160px;}#mainNav ul {list-style-type: none;padding-top: 8px;}#mainNav li { float: left; padding-left: 21px;}#mainNav li:first-child { padding-left: 80px; background: none;}#mainNav a { text-decoration: none; padding: 0px 10px; font: normal 14px "ITCAvantGarde", Helvetica, Arial, sans-serif; color: #FFF;}#mainNav ul ul { display: none;}#mainNav ul ul li { padding-left: 0 !important; z-index: 999 !important;}#mainNav ul ul ul { }#mainNav ul ul a { }#mainNav li:hover > a,#mainNav ul ul :hover > a { color: #afc2d1;}#mainNav ul ul a:hover { }#mainNav ul li:hover > ul { display: block;} And here's the css of a similar menu: #mainNav { margin: 0 auto; position: relative; width: 1000px; z-index: 101; } #mainNav ul { border-left: 1px solid #CCCCCC; border-right: 1px solid #FFFFFF; float: left; height: 37px; list-style: none outside none; margin: 0 auto; padding-left: 0; position: relative; z-index: 100; } #mainNav li { border-left: 1px solid #FFFFFF; border-right: 1px solid #CCCCCC; float: left; position: relative; } #mainNav a { color: #8D8C8C; display: block; font: 18px/38px "GothamBoldRegular",Helvetica,Arial,sans-serif; height: 37px; padding: 0 11px; text-decoration: none; text-transform: uppercase; } #mainNav ul ul { border: medium none; display: none; float: left; left: 0; position: absolute; top: 38px; width: 260px; z-index: 99; } #mainNav ul ul li { background: url("images/nav_bg_hover.png") repeat scroll 0 0 transparent; border: medium none !important; float: none; padding: 0 !important; } #mainNav ul ul ul { left: 100%; top: 0; } #mainNav ul ul a { background-image: none !important; border-bottom: 1px dotted #FFFFFF; color: #FFFFFF; font-weight: normal; height: auto; line-height: normal; overflow: hidden; padding: 10px !important; position: relative; text-transform: capitalize; width: 240px; z-index: 99; } #mainNav li:hover { color: #6A99C8; } #mainNav li:hover { background: url("images/nav_a_hover.jpg") repeat-x scroll center bottom transparent; } #mainNav li:hover li { color: #FFFFFF; } #mainNav ul ul li:hover a { background: url("images/nav_bg_hover.png") repeat scroll 0 0 #56A1D5 !important; } #mainNav ul li:hover > ul { display: block; } How do I stack them vertically?
  18. Hi, i wanna ask how to make a dropdown menu using bootstrap ?Tell me how to make it step by step ( coz i'm a newbie in javascript hehe..)Thanks for any helps
  19. Does anyone know what event is fired when a Dropdown entry is selected for an input of type Textbox? I am using the AutoComplete Widget of the jQuery UI and I am attempting to perform some functions on the style of the Textbox when a user selects one of the entries. P.S. I'm also wondering is there a way a can track which events are being triggered as I use controls on the page perhaps maybe Google Chrome Developer Tools or FireFox Develpor Tools have this functionality?
  20. Hi there, I have 10 drop down boxes on a page where people can select some units they wish to study. Obviously people can pick more than one unit and so i want to avoid them from picking the same unit twice in each of the drop down boxes. I have looked into the disable function on drop down boxes but cannot figure out how i would go about disabling a drop down selection entry using Javascript. So far i have looked at the following jquery function below but it will not work on my php page as i do not have access to the head of the document on the platform i am on and just the body: $('select').change(function() { var ary = new Array(); $('select option:selected').each(function() { if ($(this).val().length > 0) { ary.push($(this).val()); } }); $('select option').each(function() { if ($.inArray($(this).val(), ary) > -1) { $(this).attr('disabled', 'disabled'); } else { $(this).removeAttr('disabled'); } });}); The example above is the sort of thing i am after but having studied the code, without it being in the head of the document it will not work and so it does not work when i change entry in the dropdown list. Does anybody have any modifications to the code or examples i can use to find out the values of all other dropdown's on a form and to then disable an index in the others where one is already selected on that index? Obviously i would need something to enable selections again. Even an alert box stating that the unit has already been picked and resetting back to original value would do. Many thanks, Mark
  21. Hey there. I just recently started to use Bootstrap and was wondering why this dropdown is not working, I have exactly what they have on their example site. <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script href="js/jquery.js" type="text/javascript" ></script><script href="js/jquery-ui.js" type="text/javascript" ></script> <script href="js/bootstrapjs" type="text/javascript" ></script><script href="js/bootstrap-dropdown.js" type="text/javascript" ></script><link href="css/bootstrap.css" rel="stylesheet" type="text/css" /><link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /><!-- <script href="js/document.js" type="text/javascript" ></script> --><script type="text/javascript"> $('.dropdown-toggle').dropdown(); </script></head> <body><div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"><ul class="nav pull-left"> <a class="brand" href="#">Project name</a></ul><div class="nav-collapse"><ul class="nav pull-right"> <li><a href="#">Blog</a></li> <li class="divider-vertical"></li><li><a href="#">Facebook</a></li> <li class="divider-vertical"></li><li><a href="#">Twitter</a></li> <li class="divider-vertical"></li><li><a href="#">Flickr</a></li> <li class="divider-vertical"></li><li><a href="#">YouTube</a></li><li class="divider-vertical"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Another link</a></li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </div> </div></div> </body> </html>
  22. Hello everyone.There is a small problem with a drop-down form field I am trying to get work. I've this peace of code: <select name="pot"> <option value="0" selected="selected">1</option> <?php for($p=0.12; $p<=5; $p++){ ?> <option value="<?php echo $p ?>"></option> <?php } ?> </select> and what I get is this: <select name="pot"> <option value="0" selected="selected">1</option> <option value="0.12"></option> <option value="1.12"></option> <option value="2.12"></option> <option value="3.12"></option> <option value="4.12"></option> </select> but it should be like this: <select name="pot"> <option value="0" selected="selected">1</option> <option value="0.12">2</option> <option value="0.24">3</option> <option value="0.36">4</option> <option value="0.48">5</option> <option value="0.60">6</option> </select> please notice, first option is selected and it's value is 0.
  23. so you can see it live here - http://intentionally...m/wt/Page2.html but basically I'm curious as to why this page isn't validating. the fieldset tag is supposed to be used like this http://www.w3schools...dset.asp In the form I have here one of my elements is a dropdown menu. I'm not married to it but I like the box w/caption around the dropdown. As far as I can tell this is the only reason my page isn't validating. <td> <fieldset> <legend>My Student ID</legend> <select id="studentid"> <option value="nine">Nine</option> <option value="one">One</option> <option value="six">Six</option> <option value="two">Two</option> <option value="three">Three</option> <option value="six">Six</option> </select></td> </fieldset> <td>[/size][/font][/color]
  24. Hi guys, i have a bit of a PHP problem and would appreciate a bit of help. I am currently doing a project in college and it involves PHP, which i am a bit dodgy on. Basically we have to create a HTML page, with a drop box menu showing 5 music albums, and a Submit button. Here is what i have to show up the Deopdown menu in HTML: [/color]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">[/color]<html> <head><title>Album List</title></head> <form action="chosen_album.php" method="post"> <select name="albums"><option value="1">Appetite For Destruction</option><option value="2">Out Of Exile</option><option value="3">West Ryder Pauper Lunatic Asylum</option><option value="4">One By One</option><option value="5">Master Of Puppets</option> <p><input type="submit" name="submit" value="Submi" </p></select></form> </body></html> Now, when you pick an album name and hit submit, it should bring you to a page showing all the album info, track list, etc. (I have all this info from a previous project). But where im stuck is for the PHP code needed to link the HTML drop box page. This is my PHP code so far, but doesnt seem to work properly. I am using a Wamp server for my loclahost which is up and running ok, so dont think thats the problem: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""><html> <head><title>Chosen Album</title></head> <?php$chosen_album = $_POST['albums'];$album_info = ''; if ($chosen_album== 1) {//appetite for destruction$album_info ='<p class="album_title">Appetite For Destruction</p><p class="artist">Artist: Guns N Roses</p><p class="track_list">Track List:</p><ol class="list"><li>Welcome to the jungle</li><li>Its so easy</li><li>Nightrain</li><li>Out ta get me</li><li>Mr Brownstone</li><li>Paradise city</li><li>My Michelle</li><li>Think about you</li><li>Sweet Child o mine</li><li>Youre crazy</li><li>Anything goes</li><li>Rocket queen</li> </ol> <iframe width="420" height="315" src="" frameborder="0" ';}if($chosen_album==2) {//out of exile$album_info = '<p class="album_title">Out Of Exile</p><p class="artist">Artist: Audioslave</p><p class="track_list">Track List:</p><ol class="list"><li>Your Time Has Come</li><li>Out Of Exile</li><li>Be Yourself</li><li>Doesnt Remind Me</li><li>Drown Me Slowly</li><li>Heavens Dead</li><li>The Worm</li><li>Man Or Animal</li><li>Yesterday To Tomorrow</li><li>Dandelion</li><li>#1 Zero</li><li>The Curse</li><li>Like A Stone</li></ol><iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>';}if($chosen_album== 3) {//west ryder.......$album_info = '<p class="album_title">West Ryder Pauper Lunatic Asylum</p><p class="artist">Artist: Kasabian</p><p class="track_list">Track List:</p><ol class="list"><li>Underdog</li><li>Where Did All The Love Go?</li><li>Swarfiga</li><li>Fast Fuse</li><li>Take Aim</li><li>Thick As Thieves</li><li>West Ryder Silver Bullet</li><li>Vlad The Impaler</li><li>Ladies & Gentlemen (Roll The Dice)</li><li>Secret Alphabets</li><li>Fire</li><li>Happiness</li></ol><iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>';}?> (NOTE: I have only filled info for the first 3 items on the drop box to test it out)Basically, at the end i should have 1 HTML file (dropbox), 1 PHP file (album info) and 1 CSS file for styles (which im ok with.) Any help would be appreciated.
  25. Hello all, I developed pop-out slider menu that builds itself from the CSS rules and HTML content. Unfortunately I designed it around a $('.menuElement .uniqueMenuClass') strategy. Basically I have a handful of menus that do the same thing but with multiple copies of the pop-out menu script plugin with renamed '.uniqueMenuClass' for the respective menus. Example: $('.sliderMenu .menuOne').ready(function buildSlider(){ var sliderWidth = $('.sliderMenuElement .menuOne').width(); // A series of CSS dependent variables... $('.sliderMenuElement .menuOne').mouseenter(function animatedStuff(){ //series of animations triggered });} I'd then go back and copy/paste the whole thing with .menuTwo. Stupid, I know. Now, I'm trying to do something like this... $('.sliderMenu').ready(function buildSlider(){ var sliderWidth = $(this).find('.sliderMenuElement').width(); //Series of CSS dependencies... $(this).find('sliderMenuElement').mouseenter(function animatedStuff(){ //series of animations triggered });}); The problem is that .find() runs through ALL of the menuSlider's. Should I assign a unique ID to the menus and all their descendants and store the ID in all the variables and functions? Is there a way to traverse just within the $(this) element? or clear all the variables so the next menu starts clean-slate? Is this why I should have structured with lists instead of nested divs? Children aren't practical because I'm accessing a number of elements at different levels in the tree; the examples above are very simplified. Appreciate the help! Here's a link to a test version... which takes a while to load because of the multiple script references: And please no comments on the reel labeled 'webdesign' Also... here's an example of the HTML: <div class="autoSlider"> <div class="slideCont" style="top:0px;"> <div class="sliderName">Reels</div> <div class="sliderInitial"> <div class="slideEndCap leftCap"></div> <div class="slideEndCap rightCap"></div> <div class="thumbCont reels"> <div class="slideThumb reels"> <span class="thumbCaption">Motion Design</span> </div> <div class="slideThumb reels"> <span class="thumbCaption">Cinematography</span> </div> <div class="slideThumb reels"> <span class="thumbCaption">Web Design</span> </div> <div class="slideThumb reels"> <span class="thumbCaption">Color Grading</span> </div> </div> </div> </div></div>