So I have this code that I created with some help:
I don't understand how to enter code it kept creating everything on one line at the formatting looked unreadable so here is a link:
http://jsfiddle.net/QFF4x/
<div style="border:1px solid black;" onmouseover="change(this)" onmouseout="restore(this)" ></div>
Either way, when the mouse is over the black line it expands downwards.
How can i make the onomouseover area larger?
For example if the mouse is hovering up to 15 pixels underneath the line the line would expand. how can i have it do that?
*Note: I everything has to be in the HTML, inline coding only I cannot link any JS or CSS pages.
For some reason, I'm getting complaints about "external files" which isn't relevant, so I'm updating to clarify that all of this can be in one document: Live demo (click).
<style>
#outer {
padding-bottom: 15px;
}
#inner {
border: 1px solid black;
}
#inner.big {
border-width: 3px;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('mouseenter', function() {
inner.className = 'big';
});
outer.addEventListener('mouseleave', function() {
inner.className = '';
});
</script>
You don't need JavaScript for this at all. Here's just a css example: Live demo (click).
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer {
padding-bottom: 15px;
}
.inner {
border: 1px solid black;
}
.outer:hover > .inner {
border-width: 3px;
}
Rather than using JavaScript, I'm using CSS :hover. The trick here is to wrap the element in another element and pad the outer element so that you can hover over that padding to affect the inner element.
If you do want to use JavaScript, please ignore any answers here using inline js (that's where you refer to javascript functions within the html.). Here's a basic example of how to do that without inline js and keeping your styles in css: Live demo (click).
<div id="outer">
<div id="inner"></div>
</div>
CSS:
#outer {
padding-bottom: 15px;
}
#inner {
border: 1px solid black;
}
#inner.big {
border-width: 3px;
}
JavaScript:
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('mouseenter', function() {
inner.className = 'big';
});
outer.addEventListener('mouseleave', function() {
inner.className = '';
});
Why do this instead of inline js? Read these results - there are plenty! https://www.google.com/search?q=Why+is+inline+js+bad%3F
heres a solution using a wrapping div with padding:-15px and on its hover events, just use the firstElemntChild
<script>
function change (element) {
element.firstElementChild.style.border = "3px solid black";
}
function restore(element) {
element.firstElementChild.style.border = "1px solid black";
}
</script>
<div style="padding-bottom:15px;" onmouseout="restore(this)" onmouseover="change(this)" >
<div style="border:1px solid black;" >
</div>
</div>
so you can hover 15 px under the border and the border changes and restores
fiddle . http://jsfiddle.net/QFF4x/2/
To increase the border on hover change
element.style.border = "3px solid black";
To for 15px
element.style.border = "15px solid black";
You can put the div in a larger div, and set the onclick event on the larger div.
<div onmouseover="change(this.childNodes[0])" onmouseout="restore(this.childNodes[0])">
<div style="border:1px solid black;" ></div>
</div>
this is the solution.
<div style="border:1px solid black;" onmouseover="javascript:this.style.border = '8px solid black';" onmouseout="javascript:this.style.border = '1px solid black';" ></div>
http://jsfiddle.net/5GAUq/
Related
So this is a very basic function (found and edited for my purposes) that alternates the div background color to white or black.
I would like to change the code to utilize the css variables I have in the root property and have no onClick functions inside the html. I want to keep html and js seperate, but I don't know how to go about this.
Can I have two buttons that can switch between the css variable colors for the div?
Thank you.
function changeColor(color) {
var element = document.getElementById('box');
element.style.backgroundColor = color;
}
root {
--white { color: #fff}
--black { color: #000}
}
.box {
width: 100px;
height: 100px;
border: 1px solid #aaa;
background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
</div>
<button onClick=changeColor('white')>white</button>
<button onClick=changeColor('black')>black</button>
You can set one css variable and onclick change the color.
Use document.body.style.setProperty('--main-color',color) to set color to var
function changeColor(color) {
document.body.style.setProperty('--main-color',color)
}
root {
--main-color{ color: #fff}
}
.box {
width: 100px;
height: 100px;
border: 1px solid #aaa;
background-color: var(--main-color);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
</div>
<button onClick=changeColor('white')>white</button>
<button onClick=changeColor('black')>black</button>
You can add a data-color attribute to your buttons which specifies the color (variable) to change to when clicking on the given button. Then you can add the click event listener to all your buttons with the class color-btn. Then when you click on a given button the event listener will be called, which will get the data attribute from the button clicked, and then use your changeColor function to change the div to the appropriate color (using the variable).
Also, you haven't defined your variables correctly. Firstly, you need to target the root using :root. Then you nee to set your variables using --variableName: COLOR. Lastly, in your changeColor function you need to use .style.backgroundColor = "var(--" +color +")" to correctly use the variable.
See working example below
[...document.getElementsByClassName("color-btn")].forEach(elem => {
elem.addEventListener('click', function() {
const btnColor = this.getAttribute('data-color');
changeColor(btnColor);
});
})
function changeColor(color) {
var element = document.getElementById('box');
element.style.backgroundColor = "var(--" +color +")";
}
:root {
--w: #fff;
--b: #000;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #aaa;
background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
</div>
<button class="color-btn" data-color='w'>white</button>
<button class="color-btn" data-color='b'>black</button>
Register an onClick event on those buttons (you would have to assign a unique ID to them to reference them properly)
Example:
document.getElementById("myBtn").addEventListener("click", changeColor("white"));
edit
I see you're using jQuery, so:
$("#myBtn").on( "click", function() {
changeColor("white");
});
That way your HTML doesn't have JS in it. You would have 2 events, one for each button.
<!DOCTYPE html>
<html>
<head>
<style>
:root
{
--color-white:#fff;
--color-black:black;
}
.box
{
width: 100px;
height: 100px;
border: 1px solid #aaa;
}
</style>
<script>
function changeColor(color)
{
var element = document.getElementById('box');
var style = getComputedStyle(document.querySelector(':root'));
element.style.backgroundColor = style.getPropertyValue('--color-' + color);
}
</script>
</head>
<body>
<div class="box" id="box">
</div>
<button onClick=changeColor('white')>white</button>
<button onClick=changeColor('black')>black</button>
</body>
</html>
I want to add a border around a div using .wrap() and .unwrap() when this div is clicked, but the problem is that the border appears on top of the page not around the div.why?
Here is my code:
$("#add").click(function() {
//"main" is a tag.
$("main").append('<div class="cards"><div class="card new" style="width: 20rem;">\
<div class="layer"></div>\
<div class="card-block">\
<h4 class="card-title"></h4>\
<p class="card-text"></p>\
</div>\
<div class="card-block">\
<div class="delete">Del</div>\
<div class="edit" data-toggle="modal" data-target="#note">edit</div>\
</div>\
</div></div>');
var title = $("#noteTitle").val();
var text = $("#noteBody").val();
$(".new h4").html(title);
$(".new p").html(text);
var layer = $("#selected").css("background-color");
$(".new .layer").css({
"background-color": layer,
"position": "absolute",
"opacity": ".2",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%"
});
$(".card").removeClass("new");
});
$("main").on("click", ".card", function() {
if ($(this).parent().is(".border")) {
$(this).unwrap();
} else {
$(this).wrap('<div class="border"></div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" id="noteTitle" />
<textarea id="noteBody" ></textarea>
<button id="add">Click</button>
<main></main>
CSS:
.card {
margin: 10px;
height:230px;
background: url(paper.jpg);
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
word-wrap: break-word;
font-family: "comic sans MS";
float: left;
padding-right: 60px;
z-index:-1;
}
.border {
border: solid 20px black;
}
You'll probably want to toggle a CSS class on the div you want a border around, not add a new div with class "border". What you're doing is appending a new div up at the top with no content, so it does not surround. And the CSS you'll want to add is something like border: 1px solid black
Super quick example using hover css... just modify your code to add / remove a class on click for the border piece in jQuery
http://jsbin.com/fibogojulo/edit?html,css,output
There are easier ways to add a border than surrounding with a div... Using the CSS property border you can do it pretty easily.
$('#button').click(function() {
$('#div').css('border', '1px solid black');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="button">Press me</button>
<div id="div">hello</div>
I have a scenario where when click i am changing the border color from black to red by append a class to a div using ng-class.
But when i click a button the modal is getting triggered but the class is not getting appended.
<div ng-class="{'addBorder':clicked}" class="beforeClicked">
<button ng-click="clickToOpen()">My Modal</button>
</div>
function MyCtrl($scope, ngDialog) {
$scope.clicked=false;
$scope.clickToOpen = function () {
$scope.clicked=true;
ngDialog.open({ template: 'templateId' });
};
}
.addBorder{
border:1px solid red;
}
.beforeClicked{
width:100px;
height:300px;
border:1px solid black
}
DEMO
Here the div is already in black border when click on button i am making the flag true which should add class addBorder to the div which appends red color border.
But it isn't happening.
Any help would be appreciated.
Currently, beforeClicked border properties are overriding the border of .addBorder.
Just interchange the order of your css styles for .addBorder to have more preference.
.beforeClicked {
width: 100px;
height: 300px;
border: 1px solid black
}
.addBorder {
border: 1px solid red;
}
Updated fiddle: http://jsfiddle.net/nashcheez/mb6o4yd1/700/
just make the style !important
.addBorder{
border:1px solid red !important;
}
demo
Update your css like below
.beforeClicked{
width:100px;
height:300px;
border:1px solid black
}
.addBorder{
border:1px solid red;
}
add border class after before clicked class.
I want to toggle the width of a div using a button. I'm not sure how to properly use an if-else statement to check the CSS, and I'm also not clear on the syntax.
Let's assume that I have the following:
CSS
.firstDiv {
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
HTML
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
<p>This is a paragraph.</p>
</div>
JavaScript
$("#boxToggle").click(function () {
$("#firstDiv").css("width", "120px");
});
Right now, the JavaScript would only change the width once and not go back, but this still isn't working and I'm assuming that my syntax is wrong.
A JSFiddle of the above can be found at the link.
https://jsfiddle.net/647ye1pk/
Any help is appreciated.
You can use toggleClass to achieve this effect
//I need an "if-else" statement in here, but I'm not sure how to use css as a condition
$("#boxToggle").click(function () {
$(".firstDiv").toggleClass('largeWidth');
});
.firstDiv {
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.largeWidth{
width:120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
<p>This is a paragraph.</p>
</div>
And if you don't want to use the toggleClass method try this
//I need an "if-else" statement in here, but I'm not sure how to use css as a condition
click = 0;
$("#boxToggle").click(function () {
if (click == 0) {
$(".firstDiv").css("width", "120px");
click = 1;
} else {
$(".firstDiv").css("width", "80px");
click = 0;
}
});
.firstDiv {
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
<p>This is a paragraph.</p>
</div>
firstDiv is a class not an id (# vs .)
try:
$("#boxToggle").click(function () {
$(".firstDiv").css("width", "120px");
});
It can be as simple as detecting the width your div has when you click the button, and reacting appropriately:
$("#boxToggle").click(function() {
var fd = $("#firstDiv");
if(fd.css("width")!=="120px")
fd.css("width", "120px");
else
fd.css("width", "80px");
});
#firstDiv {
border: 1px solid black;
padding: 10px;
width: 80px;
margin: 5px;
display: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div id="firstDiv">
<p>This is a paragraph.</p>
</div>
Through this you do not need to use global variables and toggle functions.
you can use this
$("#boxToggle").click(function () {
var width=$(".firstDiv").css( "width" );
if (width=="80px")
{
$(".firstDiv").css("width","120px");
}
else
{
$(".firstDiv").css("width","80");
}
I have follwing css class
form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
padding: 2px 0;
}
and following html and Java Script:
<input type="text" id="txt1" style="width:300px;" />
<input type="button" id="btn" value="click here" class="medium required" onclick="return validate();"/>
<script language="javascript">
function validate()
{
if (document.getElementById('txt1').value == '') {
document.getElementById('txt1').style.borderLeft = "5px solid red";
return false;
}
}
</script>
It works in Mozila but in google Chrome whenever validation fires inputbox gets css exctly applied in javascript but it also creates top and bottom border of 1px solid
how can i solve this issue?
Thanks.
If I understand your issue, the top and bottom borders also turn red (in Chrome). You mention that they are 1px solid, but that is what you originally set them to in your css, so I assume the real issue is not that there is a solid 1px border but that it is the wrong color. So I assume they change from #CCCCCC to red when you only wanted the left border to do so.
I suspect that the border-radius (or the rendering of it after the fact) may be the issue. If you experiment with no border-radius does the issue still occur (I do not have access to Chrome to test myself)? If that solves it, then that is the problem. You might try overcoming it by doing something more explicit:
function validate()
{
var el = document.getElementById('txt1');
if (el.value == '') {
el.style.borderLeft = "5px solid red";
el.style.borderTopColor = "#CCCCCC";
el.style.borderBottomColor = "#CCCCCC";
return false;
}
}
EDIT: Based on UnLoCo's information, both in his first comment here as well as his comment in your question, you might try not using the shorthand css and see if that solves it. So instead of your css having:
border: 1px solid #CCCCCC;
You might try this in your base css and see if explicitly setting each border allows Chrome to not override the others when the left one is changed:
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
This is a known bug and has been reported: https://bugs.webkit.org/show_bug.cgi?id=72120.
However, here is a workaround for your case:
Tweak the radius from all 3px to 3px / 1px. Though it's not perfect but somehow acceptable.
demo: http://jsfiddle.net/linmic/VFBT3/51/