What comboBox or dropDownList is this one?

What comboBox or dropDownList is this one? - javascript

I'm looking to create a similar combobox or dropdown list like this where the box containing the selection items pops up when "Gold coast" or "Newest" button is click on the right side of the following page:
Deal Zoo
It seems to have a very slick look and feel and I wonder where to get the Javascript or ASP .Net component for this?

I'm the creator of Deal Zoo. Happy to help you out with the dropdown styling. It's a combination of javascript/jquery, css and plain ol' HTML to achieve the result.
You'll need to make sure you have the Jquery library. I use the google hosted version.
The HTML is:
<dl class="dropdown">
<dt><span>Newest<span class="icon"></span></span></dt>
<dd>
<ul style="display: none; ">
<li>Newest</li>
<li>Cheapest</li>
<li>Most Popular</li>
<li>Ending Soon</li>
</ul>
</dd>
</dl>
The CSS is (adapt as needed, the images would obviously need to be created)
.dropdown {
position: relative;
width: 200px;
}
.dropdown dt a {
display: block;
border: 1px solid #A3CFE4;
color: #585858;
background-color: #ececec;
background-image: -moz-linear-gradient(center top, #fefefe, #e9e9e9);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e9e9e9));
border-style: solid;
border-color: #ccc;
border-width: 1px;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 5px 0 6px 5px;
text-shadow: 0 0 1px #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
}
.dropdown dt a:hover {
border-color: #b3b3b3;
background-color: #d7d7d7;
background-image: -moz-linear-gradient(center top, #f0f0f0, #dadada);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#dadada));
}
.dropdown dt a:active {
color:#454545;
background: #ccc;
border-color: #bbb;
}
.dropdown dt a span {
cursor: pointer;
padding: 4px 5px 5px;
}
.dropdown dt a span .icon {
background: url(/images/dropdown-arrow.png) no-repeat scroll right center;
width: 14px;
height: 10px;
padding-left: 15px;
}
.dropdown dd ul {
display: none;
list-style: none;
position: absolute;
right: 0px;
top: 0px;
width: auto;
min-width: 170px;
background: white;
-webkit-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
-moz-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 4px 0px;
z-index: 100;
font-size: 12px;
}
.dropdown dd ul li a {
padding: 2px 10px 2px 20px;
display: block;
color: #333;
}
.dropdown dd ul li a:hover {
color: #fefefe;
background: #3296df;
}
.dropdown dd ul li a.selected {
background: url(/images/tick.png) left 7px no-repeat;
font-weight: bold
}
.dropdown dd ul li a.selected:hover {
background-color: #3296df;
background-position: left -53px;
color: #fefefe;
}
The Javascript is:
$(document).ready(function (){
$(".dropdown dt a").click(function(e) {
e.preventDefault();
$(this).parents(".dropdown").children("dd").children("ul").toggle();
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
});

Related

Sharepoint navigation stops working with this script embeded into the page

I am making tabs that change when clicked using Jquery and before and after CSS. When embedded into the SharePoint page the links on the navigation stop working. Everything else works on the page except for the navigation links to the other pages.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
$("li").click(function(e) {
e.preventDefault();
$("li").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
<style>
.tabrow {
text-align: center;
list-style: none;
margin: 50px 0 36px;
padding: 0;
line-height: 24px;
height: 26px;
overflow: hidden;
font-size: 16px;
font-family: verdana;
position: relative;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.selected {
background: #FFF;
color: #333;
z-index: 2;
border-bottom-color: #FFF;
}
.tabrow:before {
position: absolute;
content: " ";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}
.tabrow li:before,
.tabrow li:after {
border: 1px solid #AAA;
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
.tabrow li:before {
left: -6px;
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #D1D1D1;
}
.tabrow li:after {
right: -6px;
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #D1D1D1;
}
.tabrow li.selected:before {
box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
box-shadow: -2px 2px 0 #FFF;
}
</style>

You are effectively changing the onclick behavior of every <li> element on your sharepoint page with your javascript.
Try to be more specific with your jQuery selector. For example like this:
$(".tabrow li").click(function(e) {
e.preventDefault();
$(this).clostest(".tabrow").find("li").removeClass("selected");
$(this).addClass("selected");
});
Also you might experience problems on production environments, please enclose your jQuery like this:
$(document).ready(function() {
$(".tabrow li").click(function(e) {
e.preventDefault();
$(this).clostest(".tabrow").find("li").removeClass("selected");
$(this).addClass("selected");
});
});
This will execute the code, when page is finished loading (not only when code is reached).

2 level responsive menu doesn't display block

I'm trying to make my old menu responsive for smaller screen sizes. I get the menu icon working properly, but when I open the list it displays inline instead of block. I tried several options but could not get it work right.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
/* Main menu */
.menu
{
width: 100%;
margin: -15px 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: #d1d1d1;
background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
background: -o-linear-gradient(#d1d1d1, #b6b6b6);
background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
background: linear-gradient(#d1d1d1, #b6b6b6);
border-bottom: 4px solid #005da2;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
border-right: 1px solid #b6b6b6;
}
.menu li:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;*/
z-index: 9999 !important;
}
.menu a
{
float: left;
height: 25px;
padding: 10px 25px 0 25px;
color: #000;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
.menu li:hover > a
{
color: #fafafa;
}
*html .menu li a:hover /* IE6 */
{
color: #fafafa;
}
.menu li:hover > ul
{
display: block;
z-index: 9999 !important;
}
/* Sub-menu */
.menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 9999 !important;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
}
.menu ul ul
{
top: 0;
left: 150px;
z-index: 9999 !important;
}
.menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
.menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.menu ul a
{
padding: 10px;
height: 40px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
*html .menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html .menu ul a /* IE7 */
{
height: 10px;
}
.menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.menu 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;
}
.menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
.menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
.menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
.menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
.menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.menu li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.menu li:not(:first-child) {display: none;}
ul.menu li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.menu.responsive {position: relative;}
ul.menu.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.menu.responsive li {
float: none;
display: inline;
}
ul.menu.responsive li a {
display: block;
text-align: left;
}
}
* html .menu { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
<!--MENU-->
<ul class="menu" id="myTopnav">
<li>Home</li>
<li>Videos
<ul>
<li>Videos 1</li>
<li>Videos 2</li>
<li>Videos 3</li>
</ul>
</li>
<li>Headlines
<ul>
<li>Headlines All</li>
<li>Headlines Last Week</li>
</ul>
</li>
<li>Pictures</li>
</li>
<li class="icon">
☰
</li>

You have to put display: block; on the li.
Also, don't forget to remove the set float: none; on the a elements.
I added a z-index on the icon to be able to close it even if you were over the first element.
This may help you :
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
/* Main menu */
.menu
{
width: 100%;
margin: -15px 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: #d1d1d1;
background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
background: -o-linear-gradient(#d1d1d1, #b6b6b6);
background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
background: linear-gradient(#d1d1d1, #b6b6b6);
border-bottom: 4px solid #005da2;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
border-right: 1px solid #b6b6b6;
}
.menu li:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;*/
z-index: 9999 !important;
}
.menu a
{
float: left;
height: 25px;
padding: 10px 25px 0 25px;
color: #000;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
.menu li:hover > a
{
color: #fafafa;
}
*html .menu li a:hover /* IE6 */
{
color: #fafafa;
}
.menu li:hover > ul
{
display: block;
z-index: 9999 !important;
}
/* Sub-menu */
.menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 9999 !important;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
}
.menu ul ul
{
top: 0;
left: 150px;
z-index: 9999 !important;
}
.menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
.menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.menu ul a
{
padding: 10px;
height: 40px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
*html .menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html .menu ul a /* IE7 */
{
height: 10px;
}
.menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.menu 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;
}
.menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
.menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
.menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
.menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
.menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.menu li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.menu li:not(:first-child) {display: none;}
ul.menu li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.menu.responsive {position: relative;}
ul.menu.responsive li.icon {
position: absolute;
right: 0;
top: 0;
z-index: 10000;
}
ul.menu.responsive li {
float: none;
display: block;
}
ul.menu.responsive li a {
display: block;
text-align: left;
float: none;
}
}
* html .menu { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
<!--MENU-->
<ul class="menu" id="myTopnav">
<li>Home</li>
<li>Videos
<ul>
<li>Videos 1</li>
<li>Videos 2</li>
<li>Videos 3</li>
</ul>
</li>
<li>Headlines
<ul>
<li>Headlines All</li>
<li>Headlines Last Week</li>
</ul>
</li>
<li>Pictures</li>
</li>
<li class="icon">
☰
</li>

JQuery slideshow not working probably

I'm new to web development, I integrated this slider into my page : Slideshow source+tutorial
The slider work if I run it on any local page different to mine it runs perfectly, but on mine the following problems occur :
1-pagination + arrows don't show up
2-I cant center it
my CSS :
<style>
#font-face {
font-family: imp1;
src: url(fonts/blackchancery/BLKCHCRY.TTF);
}
* { margin: 0; outline: none; }
html {
background: #32c951 url(img/noise.png);
}
body {
padding-right: 25px;
padding-left: 25px;
padding-top: 10px;
padding-bottom: 25px;
width:1200px;
}
#header
{
position:top fixed;
padding-bottom:15px;
}
#menu-bar {
margin: 0px 0px 0px 0px;
padding: 6px 0px 4px 0px;
line-height: 100%;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
box-shadow: 0px 0px 0px #666666;
-webkit-box-shadow: 0px 0px 0px #666666;
-moz-box-shadow: 0px 0px 0px #666666;
background: #2D964D url(img/noise.png);
border: solid 1px #FFFFFF;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 3px 0px;
padding: 0px 6px 0px 12px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bolder;
font-family: helvetica;
font-style: italic;
font-size: 16px;
color: #FFFDFD;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
margin-bottom: 3px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
text-shadow: 0px 0px 0px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #82FF4D;
color: #2A7D35;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #82FF4D !important;
color: #000000 !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul {
background: #2A7D35;
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 30px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#FFFFFF !important;
font-size:15px;
font-style:italic;
font-family:helvetica;
font-weight: bold;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
#wrapper {
background-color: rgba(255, 255, 255, 0.8); /* (R, B, G, OPACITY */
position:center;
}
#main_content {
text-align:center;
}
#footer {
position:fixed;
height:20px;
background-color:red;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
background:#FFFFFF url(img/noise.png);
text-align:center;
}
#footer_content {
width:960px;
}
#footer li {
display:inline;
}
p {
font-family:imp1;
}
#welco_mes {
font-family:imp1;
font-size:35px;
color:black;
}
</style>
I suspect the whole problem comes from my CSS; an element is causing the slideshow to behave this way.
JSFiddle link: https://jsfiddle.net/nvsp94d7/3/
Though if the js+css of the slideshow are included, the slideshow immediatly sticks to the left+all its controls never show up

Here's a fork of your fiddle, https://jsfiddle.net/68z476g2/1/, that has the pagination and the slideshow centered compared to the parent div. I had to replace the slideshow pictures because they were not provided.
What comes to pagination not showing, I suspect it is because you didn't copy pagination.png to the correct location. It is referred to by the CSS and therefore it needs to be at ../images/pagination.png compared to the location of craftyslide.css
Centering the div was just matter of adding
#slideshow {
margin: 0 auto;
}
to your CSS file

Drop down javascript issues

Hello fellow stackoverflow users,
I seem to be having some issues trying to get my drop down menu to work and I'm pretty sure it is my javascript that isn't working properly. As of right now, with what I have - works when clicking the <li> element to open up the <ul> menu and stays in an active state, however, you have to click the <li> for it to close and the active state stays on rather than goes inactive like i need it too...So my questions at hand is where am I going wrong? I am still fairly new to javascript and any help would be greatly appreciated.
Requirements:
1.) on click make active and open menu
2.) either on click again on element or anywhere on page for that matter, menu closes and goes inactive.
This is what I have so far: DEMO
HTML:
<div class="top_l">
<li>Nav <span>▼</span>
<ul> Title
Title
Title
</ul>
</li>
</div>
JS:
$(document).ready(function () {
$('.top_l li').click(function () {
$('.top_l li').addClass('active');
$('.top_l li ul').slideToggle();
});
});
CSS:
.top_l {
width: 340px;
height: 60px;
float: left;
}
.top_l li {
height: 32px;
padding: 8px 12px 0 12px;
margin: 10px 0 0 6px;
border: 1px solid transparent;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float: left;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
list-style: none;
color: #A4A4A4;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 2px 2px 3px #000;
position: relative;
cursor: pointer;
}
.top_l li span {
font: 14px Arial, Helvetica, sans-serif;
}
.top_l li:hover, .top_l li.active {
color: #FFF;
border: 1px solid #444;
}
.top_l li ul {
width: 120px;
height: 120px;
background: #222;
border: 1px solid #444;
-moz-box-shadow: inset 0 0.1em 0.4em 0.1em #000;
-webkit-box-shadow: inset 0 0.1em 0.4em 0.1em #000;
box-shadow: inset 0 0.1em 0.4em 0.1em #000;
display: none;
position: absolute;
top: 22px;
left: 4px;
}
.top_l li ul a {
width: 118px;
height: 28px;
padding: 10px 0 0 0;
background: red;
float: left;
color: #FFF;
font: 14px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
}

You never remove the class on second click.
Check if it's active with .hasClass() and if so, remove it with .removeClass().
$('.top_l li').click(function () {
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
$('.top_l li ul').slideToggle();
});
Edit
Second part of request, to make the list close when you click anywhere on the page. Try this:
$(document).ready(function () {
$('.top_l ul').click(function (e) {
$('.top_l ul').addClass('active');
$('.top_l ul li').slideToggle();
});
$(document).click(function() {
$('.top_l ul li').slideUp();
});
$('.top_l ul,.top_l li').click(function(e) {
e.stopPropagation();
});
});

Removing the page flicker when loading javascript/css

I tried putting the inline javascript code after</body> , but it didn't help.
HTML code:
<html>
<head>
<meta charset="UTF-8"/>
<title> Foodstant Delivery </title>
<link rel="stylesheet" type="text/css" media="screen" href="testCSS.css" />
<link rel="stylesheet" type="text/css" href="jquery.booklet.1.4.0.css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.min.js"> </script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.booklet.1.4.0.min.js" type="text/javascript">
</script>
</head>
<body>
<div id="container">
<div id="numb1">
<img src="images/number4.png" />
</div>
<figure id="logo">
<img src="images/logo23.png" alt="Foodstant Delivery logo" />
</figure>
<figure id="abtex">
<img src="images/abtext126.png" />
</figure>
<div class="Navigation">
<div id="navbar">
<ul>
<li class="OP"><img src="images/house.png" width="40" height="32" />
</li>
<li class="OP" id="OPM1"><img src="images/order.png" />Orders</li>
<li class="OP" id="OPM"><img src="images/menupic3.png" />Menu</li>
<li class="OP"> <img src="images/contact.png" />Contact
<div class="extended">
<div class="arrow-container"><div class="arrow-up"></div></div>
<ul class="smallNav">
<li>+65-65553333</li>
<li>Facebook</li>
<li>Twitter</li>
<li>enquiry [at] foodstant [dot] com</li>
</ul>
</div>
</li>
<li class="OP"><img src="images/Pen.png" />About Us</li>
<li class="OP"><img src="images/pin.png" />Jobs</li>
</ul>
</div>
</div>
<span id="papersl">
<img src="images/paperslant5.png" />
</span>
<div id="mybook">
<div>
<img src="images/CC1.png" width="100%" height="100%" />
</div>
<div>
<img src="images/WC.png" width="100%" height="100%" />
</div>
<div>
<img src="images/ss1.png" width="100%" height="100%" />
</div>
<div>
<img src="images/beverages.png" width="100%" height="100%" />
</div>
</div>
<form action="" id="search-form" class="SF">
<fieldset>
<input type="text" id="search" name="search" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" value="Search..." class="searchfield" />
<input type="submit" id="search-submit" value="" />
</fieldset>
</form>
<figure id="foot">
<img src="images/footer-comb1.png" usemap="#green" border="0">
<map name="green">
<area shape="rect" coords="503,41,614,85" href="http://www.trees.com/furniture.html">
<area shape="rect" coords="710,44,866,84" href="#0" id="se" >
</map>
</figure>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#numb1').hide().delay(800).fadeIn('normal');
$('#se').click(function() {
$('.SF').css('visibility','visible');
});
$(function() {
$('#mybook').booklet({
width:600,
height:350
});
});
});
</script>
</html>
CSS:
* {
margin: 0;
padding:0;
}
body {
background-image: url('images/BG-W1.png');
font-family: 'Conv_LITHOSPRO-REGULAR',Verdana,Helvetica,'Courier New',sans-serif;
/*height: 800px !important;*/
}
#font-face {
font-family: 'Conv_LITHOSPRO-REGULAR';
src: url('fonts/LITHOSPRO-REGULAR.eot');
src: url('fonts/LITHOSPRO-REGULAR.eot?#iefix') format('embedded-opentype');
src: local('☺'), url('fonts/LITHOSPRO-REGULAR.woff') format('woff'), url('fonts/LITHOSPRO-REGULAR.ttf') format('truetype'), url('fonts/LITHOSPRO-REGULAR.svg') format('svg');
}
#container{
max-width:1000px;
margin: 0 auto;
position: relative;
padding: 0 auto;
/*height: 762px !important;*/
/*border: 2px solid blue;*/
}
#logo {
float:left;
/*border: 1px solid black;*/
height: 180px;
}
#abtex {
float: left;
/*border: 1px solid black;*/
height: 180px;
}
#navbar {
}
.ftex {
position: relative;
}
#qqq {
position: static !important;
border: 1px solid black;
background-image:url('images/bg-fs-5.png');
background-repeat:no-repeat;
height: 125px;
width: 800px;
/*padding:25px 0 0 0;*/
/*padding-top: 50px;
padding-left: 34px;*/
}
.ftex ul {
list-style-type:none;
/*border:2px solid yellow;*/
width:1200px;
}
.ftex ul li {
display:inline;
padding-right: 170px;
font-family: 'Conv_LITHOSPRO-REGULAR';
font-size: 20px;
/*border:2px solid red;*/
color:#ffbf81;
}
.ftex li a:link {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex li a:visited {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex li a:hover {
color: #ffbf81;
background:none;
border-radius: 0;
border-bottom:4px solid #ffbf81;
}
.ftex li a:active {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex ul li#ss {
border-bottom:4px solid #ffbf81;
padding-right:5px;
}
#footerBg {
position: relative;
bottom:-90px;
left:-50px;
}
#foot {
padding-top: 10px;
}
#foot img {
display: block;
}
#foothome{
padding-top:100px;
}
#foothome img {
display: block;
}
#numb1 {
position: absolute;
/*border:10px solid red;*/
top:10px;
right:-124px;
/*z-index: 100;*/
/*background:url(images/number2.png); */
}
#abt {
position: relative;
/*border: 1px solid red;*/
height: 400px;
left:180px;
top:-60px;
z-index: -2;
}
#papersl {
position: absolute;
left: 60px;
top: 222px;
z-index: -4;
}
.Navigation { background:background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
border-top-left-radius: 10px;
border-bottom-left-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
box-shadow: -3px -5px 10px #888888;
font-size: 26px;
/*position: relative;
top:-50px;*/
clear:both;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
.Navigation ul li { position: relative; list-style: none; padding: 17px 10px; }
.Navigation ul li a { font-size: 26px; color: white; text-decoration: none; }
.Navigation ul li:hover { background: url(images/hover.png) repeat-x; height: 43px; -webkit-box-shadow: 0 0px 2px black inset; padding: 20px 9px; border-left: 1px solid #a4a4a4; border-right: 1px solid #a4a4a4;}
.Navigation ul li:hover { background: none; -webkit-box-shadow: none; -moz-box-shadow: none; height: auto; border: none; }
.arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #6a6a63; position: absolute; left: 20px; top: -15px; }
.Navigation ul li .extended { position: absolute; top: 45px; left: 0; width: 220px; background: url(images/dropdownback.png); z-index: 1000; -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.8); -webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.8); box-shadow: 0 0 8px black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid white; display: none; color: white; }
.Navigation ul li .extended img { display: block; margin: 5px auto 15px auto; -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255,255,255,0.5))); }
.Navigation ul li .extended a { font-size:14px;}
.Navigation ul li .extended h2, .Navigation ul li .ultraNav h2 { padding-top: 10px; padding-left: 10px; font-size: 16px; text-shadow: 0 1px 2px black; color: white; background: url(images/headerback.png) repeat-x; height: 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.Navigation ul li .extended span { padding-left: 10px; font-size: 11px; }
.Navigation ul li .extended ul.smallNav { border-top: 1px solid rgba(141,141,141,0.50); padding: 10px; height: 100px; }
.Navigation ul li .extended ul.smallNav li { width: 200px; padding: 0; line-height: 22px; font-weight: bold; background: url(images/linkback.png) no-repeat; }
.extended ul li {float:left;}
.Navigation ul li .extended ul.smallNav li:first-child { margin: 0; }
.Navigation ul li .extended ul.smallNav li:last-child { margin-bottom: 10px; }
.Navigation ul li:hover .extended { display: block; }
.Navigation ul li ul li:hover a { color: white; }
#navbar ul {
list-style-position:inside;
padding-top: 10px;
padding-bottom: 10px;
}
#navbar ul li {
display: inline;
padding:0 20px 0px 0px;
margin-bottom: 10px;
list-style-type:disc;
}
#navbar ul li.OP {
/*list-style-image:url('images/order.png'); */
padding-left: 15px;
}
#navbar ul li.OP img {
vertical-align: middle;
}
#navbar li a:link {
color: #EF174A;
}
#navbar li a:visited {
color: #BF4100;
}
#navbar li a:hover {
color: black;
background-color:#D2D2D2;
border-radius: 10px;
}
#navbar li a:active {
color: #918FBC;
}
li a {
text-decoration:none;
}
#navbar ul li.OP a {
padding-left: 10px;
}
.Navigation ul li .extended ul.smallNav li a { color: #c7c7c7 !important; text-shadow: none !important; }
.Navigation ul li .extended ul.smallNav li a:hover { color: white !important;}
.arrow-container { margin-top:-16px; height:16px; }
fieldset {
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#main {
border: medium none;
/*height: 500px;*/
margin: 50px auto;
padding: 15px 0;
width: 326px;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
.or1 input {
background-color: #303030;
border: medium none;
border-radius: 0.4em 0.4em 0.4em 0.4em;
box-shadow: 0 -1px 0 0 #000000;
color: #FFFFFF;
font-size: 1.2em;
height: 27px;
letter-spacing: 2px;
margin: 15px 0;
padding: 0 0 0 10px;
width: 316px;
}
.ico {
float: right;
}
button {
background: -moz-linear-gradient(center bottom , #303030, #3A3A3A) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(48,48,48,1)), color-stop(100%,rgba(58,58,58,1)));
background: -webkit-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#3a3a3a',GradientType=0 ); /* IE6-9 */
border: medium none;
border-radius: 0.2em 0.2em 0.2em 0.2em;
-webkit-border-radius: .2em;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
color: #FFFFFF;
float: right;
height: 24px;
text-align: right;
width: 79px;
}
button:hover {
background: -moz-linear-gradient(center bottom , #303030, #4B4B4B) repeat scroll 0 0 transparent;
}
button:active {
border: medium none;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}
.note1 {
padding-top: 40px;
padding-left: 20px;
font-size: 20px;
text-align: center;
color: #F74E09;
}
#search-form { width: 190px; position: absolute; right: 100px;
bottom:55px;
visibility: hidden; display: block;}
#search { background: #b2a48c; border: 3px solid #402f1d; color: #2b1e11; height: 20px; line-height: 20px; width: 150px; padding: 2px 4px; position: absolute; top: 11px; left: 0}
#search-submit { background: #b2a48c url(images/search.png) no-repeat 12px 7px; border: 3px solid #402f1d; height: 50px; width: 50px; position: absolute; top: 0; right: 0; display:block;}
#search-submit img {
display: block;
}
#search-submit:hover { background-color: #c7bba7;}
/* CSS3 */
#search { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
background: -webkit-gradient(linear, left top, left bottom, from(#b2a48c), to(#9b8d74));
background: -moz-linear-gradient(top, #b2a48c, #9b8d74);
text-shadow: rgba(0,0,0,.2) 0 0 5px;
display: inline;
}
#search-submit { border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -mox-box-shadow: 0 0 5px black;display:block;
/* Webkit-transition */
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.4s, 0.4s;
-webkit-transition-timing-function: linear, ease-in;
}

Use css to set the visibility setting for body to hidden before the js is loaded then remove the property with js onload using jquery.
css:
body { visibility: hidden;}
javascript:
$().ready(function(){ $("body").css({visibility:'visible'})});

If I understand the question correctly, put this in testCSS.css...
#numb1 { visibility:hidden; }
or...
#numb1 { display:none; }
Whichever is more pleasing to you.
Doing that will hide the numb1 element before the page is displayed. What you're doing lets the page load before hiding it and then fading it in, so it's briefly visible.

We Keep Coding

JavaScript is the programming language of the Web.

What comboBox or dropDownList is this one? - javascript

Related

Sharepoint navigation stops working with this script embeded into the page

2 level responsive menu doesn't display block

JQuery slideshow not working probably

Drop down javascript issues

Removing the page flicker when loading javascript/css

Categories

Resources