TheUninvited

Hey guys, i need your help. This is what i want to do , i got this progress bar and i would like when i click the (link) to change the attribute of number (80) to 100: data-pro-bar-percent="80" --> data-pro-bar-percent="100" This is the code: <a class="button" href="#">Click Link</a> <div class="pro-bar-container color-green-sea"> <div class="pro-bar bar-100 color-turquoise" data-pro-bar-percent="30" data-pro-bar-delay="4000"> <div class="pro-bar-candy candy-ltr"></div> </div> </div>

alright , thanks guys for your support i totally understand what you mean

thanks m8te i really appreciate that it was what i was looking for

Do you like them if not then what should i change to?

Here is the picture there where is the red dot i am wondering what i should add. The forum software is mybb.

i figure out an other way the ul class had an inline-table which i had to remove. And then i added class on last - li and i did something like: #container > div.nav > ul > li.last { float: right; line-height: 2.6em; margin-right: 16px; margin-top: 8px; } but thanks anyway:)

As you can see on this picture i got a simple navigation like this: <div class="nav"> <ul> <li><a href="#"><span class="welback">Welcome Back,</span>TheUninvited</a></li> <li><a href="#">Settings<b class="caret"></b></a> <ul> <div class="arrow_box"></div> <li><a href="http://localhost/forum/usercp.php">User CP</a></li> <li><a href="http://localhost/forum/modcp.php">Mod CP</a></li> <!-- start: header_welcomeblock_member_admin --> <li><a href="http://localhost/forum/admin/index.php">Admin CP</a></li> </ul> </li> <li><a href="#">View<b class="caret"></b></a> <ul> <div class="arrow_box"></div> <li><a href="#">View New Posts</a></li> <li><a href="#">View Today Posts</a></li> </ul> </li> <div class="logOut"> <a class="last" href="http://localhost/forum/member.php?action=logout&logoutkey=3cc7446fd7c6dc471fb5792753835b54"><strong>Log Out</strong></a> </div> </ul> </div> I could use position but it fails on resolution and i have seen the way it is now i got a problem if i use float's they do not work because the li got a float left. I just wanna make the last-child to be on the right side as exactly is the LOGOUT Button so how i do that?

http://screencast-o-matic.com/watch/c2euFin04P As you can see on the video when i click the x button it does not close the window but that's what i wanna do. How can i make it onclick to close the window?

I've heard about awesome css but i actually never try it out so i was wondering how i could create an icon like that:)

thank you guys, i really appreciate your feedback:)

So i was wondering what do you guys think about the user navigation menu? There who says Welcome Back that navigation i mean. Here is the link: http://www.screenr.com/qcUN My pc is kinda bad, but you can understand what i mean, if you also see something you don't really like feel free to tell.

Do you know any plugin for chrome that i can decrease or increase the resolution.?

I have made more progress than that i will update when i have the time it was just the start:P

I am desperate all the time i am trying to find a source similar to xenforo and i can't find any... I got really frustated and if you guys help me out feel free to ask me anything i can do in return! Here is the toggle bar: I want just 2 buttons over there a login and a register once the login would be clicked it would show up the bar but when the register is clicked it will moved to href. I have seen toggle bar from the bottom or from an image to toggle down but nothing like xenforo. So does anyone know any website that have a source for what i need?

Here is the thing i am trying to set this up on my mybb theme and the thing is i want to make the navigation .active as default of starting up the slider. For instance it starts up from the left side and if you point the mouse it moves right? So what i want is to start from the active bar and then if you move the point of your mouse to do the default action as it does. I have learned some javascript i quite understand the code but i don't know how to on the code is really still frustrating to me javascript. I have seen the javascript code and in some part it shows something like this: slip = document.createElement("li"); slip.className = "highlight"; ul.appendChild(slip); which it create an element li and pass a classname of "highlight" into slip variable. But what i want isn't to create an element i want the code to find the class name of "active" and set as default the startup from there. Anyways here is the code: HTML: <html> <head> <link rel="stylesheet" href="menu-2.css"> </head> <body> <div id="sse2"> <div id="sses2"> <ul> <li><a href="?menu=2&skin=2&p=Javascript-Menus">Javascript Menus</a></li> <li><a href="?menu=2&skin=2&p=Horizontal-Menus">Horizontal Menus</a></li> <li><a class="active" href="?menu=2&skin=2&p=Web-Menus">Web Menus</a></li> </ul> </div> </div> <script src="menu.js"></script> </body> </html> CSS: /* Visit http://www.menucool.com/horizontal/javascript-menu for source code and other menu CSS templates */ #sse2 { /*You can decorate the menu's container, such as adding background images through this block*/ background-color: #222; height: 38px; padding: 15px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } #sses2 { margin:0 auto;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/ } #sses2 ul { position: relative; list-style-type: none; float:left; padding:0;margin:0; } #sses2 li { float:left; list-style-type: none; padding:0;margin:0;background-image:none; } /*CSS for background bubble*/ #sses2 li.highlight { background:#036 url(mb2_2.gif) no-repeat center bottom; top:0px; height:30px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; z-index: 1; position: absolute; overflow:hidden; } #sses2 li a { height:30px; padding-top: 8px; margin: 0 20px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/ color: #fff; font: normal 12px arial; text-align: center; text-decoration: none; float: left; display: block; position: relative; z-index: 2; } Javascript: /*! Visit www.menucool.com for source code, other menu scripts and web UI controls * Please keep this notice intact. Thank you. */ var sse2 = function () { var rebound = 20; //set it to 0 if rebound effect is not prefered var slip, k; return { buildMenu: function () { var m = document.getElementById('sses2'); if (!m) return; var ul = m.getElementsByTagName("ul")[0]; m.style.width = ul.offsetWidth + 1 + "px"; var items = m.getElementsByTagName("li"); var a = m.getElementsByTagName("a"); slip = document.createElement("li"); slip.className = "highlight"; ul.appendChild(slip); var url = document.location.href.toLowerCase(); k = -1; var nLength = -1; for (var i = 0; i < a.length; i++) { if (url.indexOf(a[i].href.toLowerCase()) != -1 && a[i].href.length > nLength) { k = i; nLength = a[i].href.length; } } if (k == -1 && /:\/\/(?:www\.)?[^.\/]+?\.[^.\/]+\/?$/.test) { for (var i = 0; i < a.length; i++) { if (a[i].getAttribute("maptopuredomain") == "true") { k = i; break; } } if (k == -1 && a[0].getAttribute("maptopuredomain") != "false") k = 0; } if (k > -1) { slip.style.width = items[k].offsetWidth + "px"; //slip.style.left = items[k].offsetLeft + "px"; sse2.move(items[k]); //comment out this line and uncomment the line above to disable initial animation } else { slip.style.visibility = "hidden"; } for (var i = 0; i < items.length - 1; i++) { items[i].onmouseover = function () { if (k == -1) slip.style.visibility = "visible"; if (this.offsetLeft != slip.offsetLeft) { sse2.move(this); } } } m.onmouseover = function () { if (slip.t2) slip.t2 = clearTimeout(slip.t2); }; m.onmouseout = function () { if (k > -1 && items[k].offsetLeft != slip.offsetLeft) { slip.t2 = setTimeout(function () { sse2.move(items[k]); }, 50); } if (k == -1) slip.t2 = setTimeout(function () { slip.style.visibility = "hidden"; }, 50); }; }, move: function (target) { clearInterval(slip.timer); var direction = (slip.offsetLeft < target.offsetLeft) ? 1 : -1; slip.timer = setInterval(function () { sse2.mv(target, direction); }, 15); }, mv: function (target, direction) { if (direction == 1) { if (slip.offsetLeft - rebound < target.offsetLeft) this.changePosition(target, 1); else { clearInterval(slip.timer); slip.timer = setInterval(function () { sse2.recoil(target, 1); }, 15); } } else { if (slip.offsetLeft + rebound > target.offsetLeft) this.changePosition(target, -1); else { clearInterval(slip.timer); slip.timer = setInterval(function () { sse2.recoil(target, -1); }, 15); } } this.changeWidth(target); }, recoil: function (target, direction) { if (direction == -1) { if (slip.offsetLeft > target.offsetLeft) { slip.style.left = target.offsetLeft + "px"; clearInterval(slip.timer); } else slip.style.left = slip.offsetLeft + 2 + "px"; } else { if (slip.offsetLeft < target.offsetLeft) { slip.style.left = target.offsetLeft + "px"; clearInterval(slip.timer); } else slip.style.left = slip.offsetLeft - 2 + "px"; } }, changePosition: function (target, direction) { if (direction == 1) { //following +1 will fix the IE8 bug of x+1=x, we force it to x+2 slip.style.left = slip.offsetLeft + Math.ceil(Math.abs(target.offsetLeft - slip.offsetLeft + rebound) / 10) + 1 + "px"; } else { //following -1 will fix the Opera bug of x-1=x, we force it to x-2 slip.style.left = slip.offsetLeft - Math.ceil(Math.abs(slip.offsetLeft - target.offsetLeft + rebound) / 10) - 1 + "px"; } }, changeWidth: function (target) { if (slip.offsetWidth != target.offsetWidth) { var diff = slip.offsetWidth - target.offsetWidth; if (Math.abs(diff) < 4) slip.style.width = target.offsetWidth + "px"; else slip.style.width = slip.offsetWidth - Math.round(diff / 3) + "px"; } } }; } (); if (window.addEventListener) { window.addEventListener("load", sse2.buildMenu, false); } else if (window.attachEvent) { window.attachEvent("onload", sse2.buildMenu); } else { window["onload"] = sse2.buildMenu; } Download all files together: http://www.mediafire.com/download/kcxr4j6m1bik51y/javamenu.zip