I've been trying to create expandable buttons exactly like the ones near the bottom of this site (http://mastermechanic.ca/services.php), but I've been having trouble figuring it out. I'm a beginner in JavaScript, so any help would be greatly appreciated.
HTML:
<button id="lol">Some long text</button>
CSS: #lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px}
try defining width for button...
see example JS Fiddle
#lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px; width: 50%;}
I have made the CSS you may need to have the exact button in the link below. I hope it helps. Cheer.
CSS:
.big {
background: #fb7303;
height: 100px;
width: 250px;
border: 5px solid #ffa500;
border-radius:10px;
color: white;
font-size: 20px;
}
HTML:
<button class="big">Schedule <br>Maintenance</button>
Fiddle link: http://jsfiddle.net/dHq74/3/
I didn't create a very detailed example, but this should set you on the right track. You can play around with it from here.
They use a combination of Jquery & Css, when the user clicks on the "Button" it adds the class "fullheight", and when the click it again, it adds a class "smallheight"
$( "#reveal-container" ).toggleClass("smallheight");
$( "#reveal-container" ).toggleClass("fullheight");
I DIDNT do this. Buy maybe you can still benefit from my example:
I just created a container DIV like they did, then use Jquery to slide it open and closed:
jQuery
$(".button").click(function () {
$button = $(this);
$content = $button.next();
$content.slideToggle(500, function () {
});
});
See FIDDLE for full example .
Hope this helps you. :)
Related
Here`s the HTML Input Range
<input id="golden_range" type="range">
I can change the Background Color of the Range Track to "#DDD" using this CSS
#golden_range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #DDD;
border: none;
border-radius: 3px;
}
#golden_range::-moz-range-track {
width: 300px;
height: 5px;
background: #DDD;
border: none;
border-radius: 3px;
}
but i'm not able to change the background color using Jquery/Javascript. Please help me with this. Here's the code i'm trying to.
$('#golden_range::-webkit-slider-runnable-track').css('background', '#000');
$('#golden_range::-moz-range-track').css('background', '#000');
According to the code in your question, I see a mistake in your syntax. In css the background color property is written as "background-color: color_hex_value". This is how your css code should look like:
#golden_range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background-color: #DDD;
border: none;
border-radius: 3px;
}
#golden_range::-moz-range-track {
width: 300px;
height: 5px;
background-color: #DDD;
border: none;
border-radius: 3px;
}
And this is the code for jquery:
$("#golden_range::-webkit-slider-runnable-track").css("background-color", "#000");
In case you are still having doubts, give a look at these two sources for css background-color properties and Jquery css() method.
You can do this now (2020) by making use of CSS variables.
CSS
#golden_range::-webkit-slider-runnable-track {
background: var(--track-background, #ddd);
}
#golden_range::-moz-range-track {
background: var(--track-background, #ddd);
}
Javascript
document.querySelector('#golden_range').style.setProperty('--track-background', '#f00');
(should change the track background to red)
I'm doing this in Player Chrome to style the media player progress bar, using a background gradient on the track to show progress.
Bad news. I have not found a proper way to do... but I found a dirty way;
Insert a style tag in the body of the page. Of course, the content of this tag is generated with javascript:
var estilo = $("<style>").attr("id", "some_id");
//for Chrome, e.g.
var mod= "::-webkit-slider-runnable-track";
var txt= "#id_range" + mod + " {\n";
txt+= " background-color: rgb(100,100,100)\n";
txt+= "}\n";
estilo.text(txt);
$("#some_id").remove();
$("div#other_id").append(estilo);
it's ugly, slow and bad, but it works.
Add below code into your files
CSS:
#golden_range.change::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #000;
border: none;
border-radius: 3px;
}
#golden_range.change::-moz-range-track {
width: 300px;
height: 5px;
background: #000;
border: none;
border-radius: 3px;
}
jQuery:
$(document).on('input', '#golden_range', function() {
var rangeValue = $(this).val();
var changeRange = 20;
if(currrentRange > changeRange){
$("#golden_range").addClass("change");
}
});
Note: Please check changeRange value and change as you want.
I have an issue concerning the slideUp() method. It works only for the last element (Panel 3). The first two slide down and I have no idea why.. Please keep in mind that I just started with jQuery and I'm really a newbie.
Here is the jQuery code:
$(document).ready(function () {
$('.panel').on('click', function() {
$(this).slideUp(600);
});
});
And here is the JSfiddle -> http://jsfiddle.net/py4tfq3f/2/
Thank you for your time!!
Change display:inline-block from the panel div to float:left,it solves the issue.
DEMO
CSS:
.panel {
margin: 50px 0 0 10px;
width: 200px;
height: 200px;
font-family: tahoma;
float:left;
border: 2px solid gray;
border-radius: 5px;
overflow: hidden;
}
I want increase title tag size on mouse hover which is in anchor tag. so how can target to title.
kesar sisodiya
The title text is handled by the browser and is not made available to us. You could make your own title text handler with JavaScript, but I don't think that's a very good solution.
You can't increase the size of title property.
You can try using the tooltip provided by jQuery.
jQuery Tooltip example
You could use a div that displayed when you hover over your text.
<div class="custom_title_tag">This is the title</div>
then style it with css
a:hover .custom_title_tag {
background:black;
opacity: 1.0;
}
The first answer was pretty straightforward though. But you could just position it relative to the link title you want to show.
check this, hope it helps you
a {
color: #000;
text-decoration: none;
}
a:hover {
color: green;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #000;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background:#ccc;
}
You can see the code here: http://jsfiddle.net/KfwyL/
I have a div and inside of the div there is an h1. I have the h1 set so that on hover it becomes green. I want to make it so that when the mouse hovers over the h1, the div gets a box shadow. my code is not working.
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="../stylesheets/1.css">
<title> Max Pleaner's First Website
</title>
</head>
<body>
<div class="welcomebox">
<h1 class="welcometext">Welcome to my site.
</h1>
</div>
</body>
<<script src="../Scripts/1.js"> </script>
</html>
css:
body {
background-image:url('../images/sharks.jpg');
}
.welcomebox {background-color:#1C0245;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
width: 390px;
height: 78px;
margin-left:100px;
margin-top:28px;
border-style:solid;
border-width:medium;
}
h1 {
display:inline-block;
margin-left: 12px;
height: 40px;
width: 357px;
background-color: #670715;
padding: 4px;
position: relative;
bottom: 5px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
h1:hover {background-color: green;}
Javascript:
welcomeboxshadow = document.getElementsByClass("welcometext");
function doit()
{
var topbox = document.getElementsbyClass("welcomebox")
topbox.style.box-shadow = "-webkit-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);-moz-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);"
};
welcomeboxshadow.onmouseover.doit;
The first thing you'll want to do is discover your browser's Dev Tools. On Chrome and IE, press F12, but you can find it somewhere in the menus. The dev tools console reports errors, amongst other things.
Here it would be telling you that getElementsByClass doesn't exist on document. The method is called getElementsByClassName (note the "Name") at the end.
Once past that, you'd find that it would complain that NodeList doesn't have a style property. getElementsByClassName returns a NodeList (a list of nodes, in this case elements). Each of those has a style, but not the list. So you'd have to loop through the list to work with the style of each element.
here is a working version of your code that doesn't use jQuery since I figured you wanted to know how to do this in pure JS...
welcomeboxshadow = document.getElementsByClassName("welcometext");
welcomeboxshadow[0].addEventListener('mouseover',
function() {
var topbox = document.getElementsByClassName("welcomebox");
topbox[0].setAttribute("class","welcomebox welcomeBoxMouseOver")
}, false)
I changed the inline style to a class but the concept is the same.
The problems were mostly invalid function names (getElementsByClass*Name*), trying to set properties that didn't exist (topbox.style.box-shadow)
Also you need to remember that function returns a collection, not a single element, so you need to reference it using [0]
Note that I would recommend not using the raw js approach in this
case, I'd prefer to use jQuery as it's much cleaner and once you go beyond anything simple like your code you will be glad you used it
This doesn't use your event listeners, but gives you an idea of how to apply the drop shadow. This uses jQuery.
http://jsfiddle.net/KfwyL/20/
I modified your html since it doesn't want you to use head/body tags.
<div class="welcomebox">
<h1 class="welcometext" onmouseover="$('.welcomebox').addClass('boxshadow');" onmouseout="$('.welcomebox').removeClass('boxshadow');">Welcome to my site.
</h1>
</div>
css:
.welcomebox {background-color:#1C0245;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
width: 390px;
height: 78px;
margin-left:100px;
margin-top:28px;
border-style:solid;
border-width:medium;
}
h1 {
display:inline-block;
margin-left: 12px;
height: 40px;
width: 357px;
background-color: #670715;
padding: 4px;
position: relative;
bottom: 5px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
h1:hover {background-color: green;}
.boxshadow
{
box-shadow: 10px 10px 5px #888888;
}
Here's a working version with a box shadow working correctly without using jQuery:
Live demo
Javascript:
welcomeboxshadow = document.getElementById("welcomeH1");
welcomeboxshadow.addEventListener('mouseover', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox shadowed";
}, false)
welcomeboxshadow.addEventListener('mouseout', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox";
}, false)
HTML changes:
<div class="welcomebox" id="welcomeDiv">
<h1 class="welcometext" id="welcomeH1">Welcome to my site.</h1>
Im not an expert either, but why not just add:
.welcomebox:hover { box-shadow here }
to your css?
I have a style I like and as usual it looks good in Firefox 18 but on the version of IE 9 (i know its not fully up to date) it looks horrible (and broken).
So I decided to give up on the style and try and find an example that works online. However I'm finding it impossible to find something similar not to mention compatible with IE!
Does anyone here know how to fix my example and maybe make it more backwards compatible OR does anyone know any examples of this kind of style I can get some pointers from?
HTML
<div class="DateStyle"><span class="DateStyle_Date">21/01/2013</span><span class="DateStyle_Cross">x</span></div>
<div class="DateStyle"><span class="DateStyle_Date">11/02/2012</span><span class="DateStyle_Cross">x</span></div>
<div class="DateStyle"><span class="DateStyle_Date">08/05/2012</span><span class="DateStyle_Cross">x</span></div>
CSS
.DateStyle {
display: inline-block;
background-color: #4A4F54;
color: #A4A7AA;
font-weight: bolder;
-moz-border-radius: 8px;
border-radius: 8px;
padding: 2px 6px 2px 8px;
line-height: 1.2em;
}
.DateStyle_Date {
padding-right: 5px;
border-right: #A4A7AA dashed 1px;
}
.DateStyle_Cross{
padding-left: 4px;
height: 15px;
}
.DateStyle:hover {
background-color: #5C6165;
}
JQuery
$(document).ready(function() {
$('.DateStyle_Cross').hover(function(){
$(this).parent().css('background','#751919 ');
}, function(){
$(this).parent().css('background','#4A4F54');
})
$('.DateStyle').hover.css( 'cursor', 'crosshair' );
$('.DateStyle_Cross').hover.css( 'cursor', 'crosshair' );
});
http://jsfiddle.net/pUb6q/
Thanks