I have a simple list as follows:
<div class="settingButton">
<div class="subManu">
<ul>
<li><a onclick="alert('clicked!!')" href="#">Default Categories</a></li>
<li><a onclick="alert('clicked!!')" href="#">Wizard</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
</div>
I do not see the alerts on clicking the links! It works fine in Chrome, but not in IE and FF. I used this same structure without assigning class and it works as expected. Maybe the problem is with the CSS, but I am not sure what. Here is the CSS for the dropdown,
.settingButton {
background:url(/mobiledoc/jsp/dashboard/images/settings.png) 0 0 no-repeat;
width:25px;
height:37px;
float:left;
position:absolute;
right:13px;
top:-30px;
}
.settingButton a {
display:block;
width:25px;
height:37px;
}
.settingButton:hover {
background:url(/mobiledoc/jsp/dashboard/images/settingsHover.png) 0 0 no-repeat;
}
.settingButton:active {
background:url(/mobiledoc/jsp/dashboard/images/settingsActive.png) 0 0 no-repeat;
}
.settingButton div.subManu {
display:none;
height:100px;
}
.settingButton:hover div.subManu {
background:url(/mobiledoc/jsp/dashboard/images/subNavArrow.png) no-repeat right 3px;
position:absolute;
top:20px;
z-index:99;
right:0;
width:250px;
height:50px;
display:block;
padding:13px 0 0 0;
}
div.subManu ul {
display:block;
background:url(/mobiledoc/jsp/dashboard/images/dropDownMidBg.png) repeat-x;
border-left:#547b9a 1px solid;
border-right:#547b9a 1px solid;
height:29px;
padding:0 0 0 7px;
}
div.subManu ul li {
width:110px;
float:left;
margin:0 5px;
display:block;
height:29px;
}
div.subManu ul li a {
display:inline;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
line-height:28px;
}
div.subManu ul li a:hover {
color:#b7f630;
}
div.subManu ul li.active-manu a {
color:#b7f630;
}
I have gone through different question but didn't find any relevant answers. Let me know if you need any more info.
Thanks!
If you don't want a link, don't use an A element, use a button or styled span instead, e.g.
<style type="text/css">
.clickable:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
...
<span class="clickable">thing to click</span>
Anyhow, the preferred method for links is:
<a href="http://link for script-disabled browsers"
onclick="myFunction(); return false;">...</a>
Reference: jsFiddle
You will notice I only made two changes to your code.
The first change is to include background color for the hover div.
The second change is to make the font words viewable on the white background since the font's are white themselves.
To see both click events working, hover over the black rectangle in the top right corner and you will see the two links that will pop up and allow the alert to invoke when clicked.
The bottom line is there is nothing wrong with your code, it's just you need to hover to access the clickable links.
Disclaimer: It's for the Question only and doesn't cover other things like the preferred method for anchor links. ;-)
You might want to try something like this instead:
Default Categories
Related
Im having difficulties with Firefox and drop down menu.
It has of about 200 px gap under the drop down list created by slideToggle.
When inspected, that area is not taken by anything and completely blank/empty.
Chrome displays everything correctly.
Source is here http://stafter.com/demo
I have been fighting this for 2 days already playing around "display" and "margins".
Here is the main code stracture
JQuery CODE
<script type="text/javascript">
$(document).ready(function(){
$(".plus1").click(function(){
$(".open1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus2").click(function(){
$(".open2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus3").click(function(){
$(".open3").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
HTML CODE
<html>
<head></head>
<body>
<div id="wrapper">
<div id="container">
<div id="ul_wrap">
<div class="plus1">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open1"></p>
</div>
<div class="plus2">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open2"></p>
</div>
<div class="plus3">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open3"></p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
<html>
CSS
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -77px;
padding:0;
}
.footer, .push {
height: 77px;
clear:both;
}
.footer{
width:100%;
background: url('../images/bottom_bg.jpg') repeat-x 0 0;
position:relative;
margin:auto;
}
.container {
width:800px;
min-height:400px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
padding:30px;
}
#ul_wrap {
position:relative;
margin-bottom:-100px;
clear:both;
}
#ul_wrap ul{
display:inline-block;
position:relative;
left:-20px;
padding:5px 0px 0px 10px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
clear:both;
height:27px;
}
#ul_wrap li{
font-size:16px;
text-align:left;
float:left;
list-style:none;
}
.one{
width:40px;
}
.two{
width:410px;
}
.three{
width:88px;
}
.open1, .open2, .open3{
margin:-5px 0 20px 0;
position:relative;
font-size:12px;
display:none;
}
PLEASE NO COMMENTS LIKE I FORGOT TO CLOSE A TAG OR SMTH, i had to rewrite the entire html code to post it here in short version and shorter names because otherwise it would be 4 page code of css html and javascript. Problem is not in debugging errors in unclosed tags or smth. Source was html validated 1000 times.
After playing with margins, display properties and floating and clearing i finally assembled a working structure (for now).
The key was to clear all elements and parents containing all floating elements,
Then because for some odd reasons slideToggle wasn't working properly with white background (unless you specified height of the hiding element) behind .wrap_ul if it was display:block, only with inline-block.
With Display:inline-block it was getting footer floating on the right, no matter clear:both on both items;
With specified height, slideToggle wasn't pushing the rest of the sliding elements down below but was overlapping.
Well with all these problems only in Firefox, Chrome never had this flue...
So i posted working code in the last edit, not sure which property got the whole puzzle working which is -> (
the background behind expanding down slideToggle list,
footer that is pushed down as well when list is expanded
not floated footer and no extra gaps or spacing's between drop down list and footer)
Hope you find it usefull
I have a slight issue with my design. I currently only know how to use CSS/HTML and I would like to add a bit of "pzazz" into a design of mine. This being said , I have been looking at jQuery snippets from others who have tried to do something similar. The text appears under when the other item is hovered on however , the other items in the list move down , even if they all have the same text but since the display:none until it's hovered on , it's as if it isn't there.
These pictures should explain far better than I can.
The two different states :
http://gyazo.com/6f736e7ef79409dbd3398facb03dcf5c.png
Just to clarify ; it is the other boxes that move down. The box with the acorn stays in the same location.
In case you wish to see the code which I used , you can do so here :
http://codepen.io/redhotfusion/pen/ipocE
Here is the CSS bit :
.t_s_ul {
list-style-type:none;
width:90%;
padding-left:5px;
margin-left:-10px;
margin:0 auto;
}
.t_s_li {
width:70px;
height:70px;
border:4px white solid;
display:inline-block;
border-radius:5px;
margin:5px;
position:relative;
}
.t_s_li:hover{
transition:1s;
background-color:white;
}
.type_icon {
background:url("http://i.imgur.com/xix8EC9.png");
width:100%;
height:100%;
background-size:100%;
margin-left:-2px;
}
.type_icon:hover{
transition:1s;
cursor:pointer;
background:url("http://i.imgur.com/e1IONg2.png");
}
.course_type_text {
width:75px;
color:white;
font-size:0.85em;
margin:0 auto;
margin-top:0.5em;
margin-left:-0.15em;
font-family:"Open Sans" , arial;
font-weight:400;
The HTML :
<ul class="t_s_ul">
<li class="t_s_li">
<div class="type_icon"></div>
<DIV class="course_type_text">Course One</DIV>
</li>
<li class="t_s_li"></li>
<li class="t_s_li"></li>
<li class="t_s_li"></li>
</ul>
THE JS/JQUERY
$(function(){
$(".spire-menu").hover(function(){
$(this).find(".menu-item").fadeIn();
}
,function(){
$(this).find(".menu-item").fadeOut();
}
);
});
$(".spire-menu").on('mouseenter mouseleave', function () {
$(this).find('.box').fadeToggle(100);
});
Very sorry if this is a real noob question but we all have to start somewhere!
Any advice or help is great!
Thank you ,
-Valdis
Add position: absolute; to your .course_type_text in the css
This prevents the div from altering the layout.
You could then even remove the fixed with you are adding to that class, because it will just overlap all other html elements
Also change your hover function to this:
$(".t_s_li").hover(function(){
$(this).find(".course_type_text").stop(true, true);
$(this).find(".course_type_text").fadeIn();
}
,function(){
$(this).find(".course_type_text").stop(true, true);
$(this).find(".course_type_text").fadeOut();
}
);
This will prevent queuing the animations when you move fast over it with the mouse several times.
See here for demo:
http://codepen.io/anon/pen/fICiD
Since you are using display:inline-block to get side by side the li elements you can use this on your class t_s_li:
.t_s_li {
vertical-align:top;
}
The demo http://codepen.io/anon/pen/jHbBq
For default the vertical-align for inline-block elements is baseline.
Try adding:
float: left;
to your .t_s_li class
http://codepen.io/anon/pen/oLIbz
Or what Dank and RononDex suggested... this is just another way to do it. :D
Apply float:left to .t_s_li
like this,
.t_s_li {
float:left;
}
Here's your css:
.course_type_text {
float: left; /*<-----added here*/
width:75px;
color:white;
font-size:0.85em;
margin:0 auto;
margin-top:0.5em;
margin-left:-0.15em;
font-family:"Open Sans" , arial;
font-weight:400;
display:block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Demo JSFIDDLE
I am using this plugin: http://www.ericmmartin.com/projects/simplemodal/
I am trying to use the default button to close the pop-up window, but it will not close. I have added the simplemodule-close class to the that will close the div, but that is to no avail. I have also tried using jQuery.modal.close(); but that is not working..
I have read hundreds of other posts, but for some reason it is not working.
Note: I am working in Wordpress so $ = jQuery (for noConflict)
My HTML:
<div id="basic-modal-content">
<a class="modalCloseImg simplemodal-close" title="close"></a>
<h1>Login</h1><hr />
</div>
CSS:
#basic-modal-content {
display:none;
background-color:#FFF;
border:4px solid #444;
padding:0 20px;
z-index: 2000;
position: fixed;
left:50%; margin-left:-280px; top:10%;
}
#basic-modal-content hr{display:none;}
#basic-modal-content .loginform form{width:100%;}
#basic-modal-content a.modalCloseImg{right:-13px;top:-10px;}
/* Overlay */
#simplemodal-overlay {background-color:#000;}
/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
a.modalCloseImg {background:url(/files/2013/12/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
Javascript:
jQuery(function (jQuery) {
// Load dialog on click
jQuery('.login_nav .basic').click(function (e) {
jQuery('#basic-modal-content').modal();
return false;
});
jQuery('.modalCloseImg').on('click', function(){
jQuery.modal.close();
})
});
The button to make the div appear:
echo "<div class=\"login_nav\">Logout</div>"; } else { echo "<div class=\"login_nav\">Login</div>"; }
} else { echo "<div class=\"login_nav\">Login</div>"; }
display:inline resets height and width
An empty inline element will have no width or height, so there is nothing to click. Try this:
a.modalCloseImg {
display: block;
}
I am currently experimenting with JavaScript and I'm having trouble changing the style of the links on my landing page. What I have is four boxes in the top right of the page that when clicked change the theme of the landing page. I was able to get the background and text to change when the boxes are clicked, but hyperlinks remain unchanged. I have read several other posts asking similar questions but I was unable to adapt the code to my situation.
I have tried using getElementById, and getElementByclassName but neither produced the result I was looking for. The getElementById was able to change one of the links but the rest remained unchanged. I'm guessing it only works on one link because the id can only be used once per page?
The current JavaScript code is written as four separate functions, but I was thinking perhaps it would be better to use one case statement?
I have left a link to jsfiddle, but for some reason the onclick function does not work at jsfiddle. Any help would be greatly appreciated.
Thank you!
http://jsfiddle.net/F4vte/
HTML
<body>
<div id="container">
<form>
<input type="button" id="color-box1"
onclick="colorText1();">
<input type="button" id="color-box2"
onclick="colorText2();">
<input type="button" id="color-box3"
onclick="colorText3();">
<input type="button" id="color-box4"
onclick="colorText4();">
</form>
<div id="centerText">
<h1 id="name">Donald Price</h1>
<div id="underline"></div>
<div id="nav">
Blog
Projects
Contact
Resume</p>
</div>
</div>
</div>
</body>
JavaScript
function colorText1(){
document.getElementById("name").style.color="#A32DCA";
document.getElementById("underline").style.color="#A32DCA";
document.getElementById("nav").style.color="#A32DCA";
document.bgColor = '#96CA2D';
}
function colorText2(){
document.getElementById("name").style.color="#8FB299";
document.getElementById("underline").style.color="#8FB299";
document.bgColor = '#FFFFFF';
}
function colorText3(){
document.getElementById("name").style.color="#484F5B";
document.getElementById("underline").style.color="#484F5B";
document.bgColor = '#4BB5C1';
}
function colorText4(){
document.getElementById("name").style.color="#FFFFFF";
document.getElementById("underline").style.color="#FFFFFF";
document.bgColor = '#00191C';
}
CSS
body {
font-family:Helvetica,Arial,Verdana,sans-serif;
font-size:62.5%;
width:960px;
padding-left:3px;
margin:auto;
}
#underline {
border-bottom:3px solid;
}
#container {
width:50em;
margin-left:auto;
margin-right:auto;
margin-top:30%;
z-index:2;
}
/*color box settings*/
#color-box1,#color-box2,#color-box3,#color-box4 {
position:absolute;
top:0;
width:50px;
height:50px;
float:left;
-webkit-transition:margin .5s ease-out;
-moz-transition:margin .5s ease-out;
-o-transition:margin .5s ease-out;
border-color:#B5E655;
border-style:solid;
margin:15px;
}
#color-box1:hover, #color-box2:hover, #color-box3:hover, #color-box4:hover {
margin-top: 4px;
}
#color-box1 {
background-color:#96CA2D;
right:0;
}
#color-box2 {
right:50px;
background-color:#FFFFFF;
}
#color-box3 {
right:100px;
background-color:#4BB5C1;
}
#color-box4 {
right:150px;
background-color:#00191C;
}
#centerText {
width:50em;
text-align:center;
}
#nav {
padding:20px;
}
#nav a {
padding-left:2px;
font-size:20px;
text-align:center;
}
a:link {
color:#000;
text-decoration:none;
}
a:visited {
text-decoration:none;
color:#999;
}
a:hover {
text-decoration:none;
color:red;
}
a:active {
text-decoration:none;
}
Aside from what #j08691 said about needing to run your existing script in the header,
just add color:inherit; to your #nav a selector in your css.
#nav a {
padding-left:2px;
font-size:20px;
text-align:center;
color:inherit;
}
This way when you change the color of #nav that color will be inherited by your links (a).
Live Demo
You can't just set the color of the div to change the color of the links. You need to get the a elements and change their style. There are probably better ways to do this, but just to illustrate, you can iterate through the child nodes of the div:
function colorText1() {
document.getElementById("name").style.color = "#A32DCA";
document.getElementById("underline").style.color = "#A32DCA";
var children = document.getElementById("nav").childNodes;
for (var i=0; i < children.length; i++) {
if (children[i].tagName == 'A') {
children[i].style.color = "#A32DCA";
}
}
document.bgColor = '#96CA2D';
}
See it working on the updated jsFiddle.
I've got this CSS Horizontal menu which number of tabs is dependant to a mysql query made by php. Recently, I got so many tabs, that it overflow under the first line of tab, and hide the top part of the content box.
I would like the tabs to overflow right of the window, with overflow hidden, but that an arrow would appear if the tabs are overflowing.
Here is an example of the html code of a menu:
<ul id="tabs">
<li class="active" id="tabFirstCategory"><a href="#" onclick='showHideTabs("FirstCategory");'>FirstCategory</a>
<li class="active" id="tabSecondCategory"><a href="#" onclick='showHideTabs("SecondCategory");'>SecondCategory</a>
</ul>
<div id="tabcontent" class="clear">Some Content</div>
And here is the CSS which style the menu and content box
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul#tabs
{
position:fixed;
width:100%;
background-color:#ffffff;
border-bottom-style: solid;
border-color: #d3d3d3;
border-width: 1px;
z-index:2;
}
ul#tabs, ul#tabs li
{
float:left;
margin:0;
padding:0;
list-style:none;
}
ul#tabs .active
{
font-weight:bold;
}
ul#tabs li a
{
float:left;
padding:4px 10px 4px;
border:1px solid #d3d3d3;
border-bottom:none;
margin-right:4px;
}
ul#tabs .active a
{
background-color:#edf4f9;
}
.clear
{
clear:both;
/*for IE6 pos*/
width:100%;
overflow:hidden;
}
#tabcontent
{
position:relative;
top:25px;
margin-bottom:25px;
}
If possible I would like to have a CSS Solution to it, but I'm not against using javascript too. (No jquery, due to managerial policy.)
You need to make your html this way
<div class="menu-outer">
<img src="left-arrow.png" onclick="moveMenu( -10 )" />
<ul>
...
</ul>
<img src="right-arrow.png" onclick="moveMenu( 10 )" />
</div>
By default set image display to none ( using css class menu-outer ). Add class ( for ex. 'large' ) which make this images visible ( will be used for div )
Now for javascript - check on load if menu fits width ( offsetWidth of ul vs. offsetWidth of div ) - if no, add 'large' class to div ( 'menu-outer large' ) - so buttons will appear
move ul using position: relative and setting its left.