I am trying to get a specific value on CSS class through querySelector but still can't find a solution:
What I'm trying to get is the "40px" value:
function onS(obj) {
var logo = document.querySelector('.logo');
var value = logo.style.marginLeft;
alert(value);
}
.logo { display: block; position: relative; margin-left: 40px; }
<div class="logo" onmouseover="onS(this)">Test!</div>
Is there any way?
logo.style just looks at the inline style attribute, it doesn't get the computed style.
To get CSS values from a <style> tag or external stylesheet, use window.getComputedStyle()
function onS(obj) {
var logo = document.querySelector('.logo');
var value = window.getComputedStyle(logo).marginLeft;
alert(value);
}
.logo { display: block; position: relative; margin-left: 40px; }
<div class="logo" onmouseover="onS(this)">Test!</div>
I used jQuery to get the value...
function onS(obj) {
var logo = $('.logo');
var value = logo.css('marginLeft');
alert(value);
}
.logo { display: block; position: relative; margin-left: 40px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo" onmouseover="onS(this)">Test!</div>
Related
What I'm trying to do feels like it should be very simple, but I haven't found the right thing.
Say I have something like this:
.list {
float: left;
width: 200px;
height: 500px;
overflow-y: auto;
}
.show {
float: right;
width: 500px;
height: 500px;
}
.display {
max-width: 500px;
max-height: 500px;
width: auto;
height: auto;
}
<div class="container" style="width: 700px;">
<div class="list">
<li>img1.jpg</li>
<li>img2.jpg</li>
<li>img3.gif</li>
<li>img4.png</li>
</div>
<div class="show">
<img src="img1.jpg" class="display" id="display">
</div>
</div>
When clicking on the list item on the left, I want the img src on the right to change to the displayed text in the list item (or some equivalent). Bonus points if there are previous and next arrows on the image on the right to continue scrolling through the available images.
Sort of like a lightbox gallery, but instead of using thumbnails, it's clicking on text or a link that creates the full size element, and instead of popping up a lightbox it just changes the existing image on the page.
Ideally I'd like to use vanilla JavaScript, but using jQuery or something isn't out of the question.
You can add JavaScript code on each li element, and sending in the li element itself with "this" in updateImage(this). I'm using a site with placeholder images, so it will look a little bit different.
function updateImage(liElement) {
const imgElement = document.querySelector('.show > img');
// Your code should be something like: "https://www.yourdomain.com/images/" + liElement.textContent
const imageSrc = `https://picsum.photos/id/${liElement.textContent}/200/200`;
imgElement.src = imageSrc;
}
.container {
display: flex;
}
.list {
width: 200px;
cursor: pointer;
padding: 0.25rem;
}
.display {
max-width: 500px;
max-height: 500px;
}
<div class="container">
<div class="list">
<li onclick="updateImage(this)">237</li>
<li onclick="updateImage(this)">240</li>
<li onclick="updateImage(this)">100</li>
<li onclick="updateImage(this)">301</li>
</div>
<div class="show">
<img src="https://picsum.photos/id/237/200/200" class="display" id="display">
</div>
</div>
You can also add a single click listener on your ul tag, and use event.target to get which li that is clicked upon.
It's a more dynamic approach, because you don't need to add onclick="updateImage(this)" on every single li tag, and it creates cleaner HTML code.
const listElement = document.querySelector('.list');
listElement.addEventListener('click', updateImage);
function updateImage(event) {
const imgElement = document.querySelector('.show > img');
const liElement = event.target;
// Your code should be something like: "https://www.yourdomain.com/images/" + liElement.textContent
const imageSrc = `https://picsum.photos/id/${liElement.textContent}/200/200`;
imgElement.src = imageSrc;
}
.container {
display: flex;
}
.list {
width: 200px;
cursor: pointer;
padding: 0.25rem;
}
list > li * {
/* so only the li tag can be event.target, and none of it's children */
pointer-events: none;
}
.display {
max-width: 500px;
max-height: 500px;
}
<div class="container">
<div class="list">
<li>237</li>
<li>240</li>
<li>100</li>
<li>301</li>
</div>
<div class="show">
<img src="https://picsum.photos/id/237/200/200" class="display" id="display">
</div>
</div>
Here's a starting point, roughing out the basic idea in vanilla JS:
const list = document.querySelector('.list');
const img = document.querySelector('#display');
const onclick = e => {
if (e.target.nodeName !== 'LI') return;
img.src = e.target.textContent;
};
list.addEventListener('click', onclick);
And a working example (I'm also setting the alt text, since the image srces are all broken links)
const list = document.querySelector('.list');
const img = document.querySelector('#display');
const onclick = e=> {
if(e.target.nodeName!=='LI') return;
img.src = e.target.textContent;
img.alt = e.target.textContent;
};
list.addEventListener('click', onclick)
.list {
float: left;
width: 200px;
height: 500px;
overflow-y: auto;
}
.show {
float: right;
width: 500px;
height: 500px;
}
.display {
max-width: 500px;
max-height: 500px;
width: auto;
height: auto;
}
<div class="container" style="width: 700px;">
<div class="list">
<li>img1.jpg</li>
<li>img2.jpg</li>
<li>img3.gif</li>
<li>img4.png</li>
</div>
<div class="show">
<img src="img1.jpg" class="display" id="display">
</div>
</div>
I need to display an image and some info about the item when a checkbox is clicked. For some reason nothing is happening and I have been tweaking this for a while with no response whatsoever.
Here is my javascript:
<script type = "text/javascript">
function displayOnChecked(var checkboxID, var id) {
if(document.getElementById(checkboxID)) {
document.getElementById(id).style.display = "block";
} else {
document.getElementById(id).style.display = "none";
}
}
</script>
In the stylesheet I have it on display: none;
Here is one of my invocations:
<input type="checkbox" name="purchasedItem" id = "item" onclick="displayOnChecked('item', 'itemInfo');">
No need for the var keyword in the arguments list of displayOnChecked, just have the variable names alone.
If you look in your console, you should be getting an error: Uncaught SyntaxError: Unexpected token var
You don't intialize variables as function arguments:
function displayOnChecked(var checkboxID, var id)
should be
unction displayOnChecked(checkboxID, id)
You can achieve this, just using the CSS pseudo-element :checked:
.checkmeout {
display: none;
position: absolute;
top: 12px;
left: 150px;
width: 400px;
height: 100px;
padding: 12px;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
}
.checkmeout img {
display: block;
width: 200px;
height: 50px;
background-color: rgb(0,0,255);
}
.checkme:checked ~ .checkmeout {
display:block;
}
<form>
<input type="checkbox" name="checkme" class="checkme" /> Check Me
<div class="checkmeout">
<img src="" alt="Check Me Out Image" />
<p>Check Me Out Text Description</p>
</div>
</form>
My goal is insert <span> into <image>, but I don't know how. Similar effect is on page http://www.bulb.cz/cs/reference, but I don't want it on hover() but on click(). I want insert "data-title" into <span> and after that <span> show on <image>.
HTML:
<div class="Fotogalery">
<img src="images/Thumb/1.jpg" data-title="Zdar" />
<img src="images/Thumb/2.jpg" data-title="Ahoj" />
<img src="images/Thumb/3.jpg" data-title="Cau" />
<img src="images/Thumb/4.jpg" data-title="KUK" />
<img src="images/Thumb/5.jpg" data-title="ohh" />
</div>
CSS:
.Foto{width: 25%;height:auto;float:left;box-sizing: border-box;}
.Gallery{position:relative;}
.Gallery span{position:absolute;z-index:999;}
Javascript:
$(".Fotogalery img").addClass("Foto");
$(".Foto").wrap( "<div class='Gallery'></div>" );
$(".Foto").after("<span></span>");
$(".Foto").click(function() {
var a = $(this).data('title');
});
Try this — http://jsfiddle.net/sergdenisov/p72jnbLt/5/:
Javascript:
$('.Fotogalery img').addClass('Foto');
$('.Foto').wrap('<div class="Gallery"></div>');
$('.Foto').click(function () {
var a = $(this).data('title');
$(this).after('<span>' + a + '</span>');
});
CSS:
.Fotogalery {
font-size: 0;
}
.Foto {
display: inline-block;
width: 100%;
}
.Gallery {
position: relative;
display: inline-block;
width: 25%;
}
.Gallery span {
position: absolute;
z-index: 1;
left: 0;
top: 0;
font-size: 16px;
}
If i understand your question right, u can use next('span') to select span:
$(".Foto").click(function() {
var a = $(this).data('title');
$(this).next('span').html(a);
})
To have span floating over image, make span position:absolute, and container postion:relative
http://jsfiddle.net/gbg1vfLb/2/
So, I am doing an assignment for my high school web design class, and I am having trouble getting the z-index of an image to change. There is supposed to be 2 images on top of each other. When you click the button on the page, the image on bottom will come to the top (or the top image will go to the bottom). Here is my code that I`m using:
The javascript
<script type="text/javascript">
function Switch()
{
document.getElementById("mononoke2").style.zIndex = "-1";
}
And here is the HTML
<div id="mononoke2">
<img src="mononoke2.png" alt="ashandsan">
</div>
<div id="mononoke3">
<img src="mononoke3.jpg" alt="sanandmoro" width="1234" height="694">
</div>
<button type="button" onclick="Switch()">Flippity Flip</button>
And the CSS
#mononoke2 {
margin-left: 0px auto;
margin-right: 0px auto;
display: block;
position: absolute;
z-index: 100;
}
#mononoke3 {
margin-left: 0px auto;
margin-right: 0px auto;
display: block;
position: relative;
left: 50px;
z-index: 20;
}
use jQuery.
$("#id").css("zindex","-1");
Change your JS function to this:
function Switch() {
var element = document.getElementById("mononoke2");
var style = window.getComputedStyle(element);
var index = style.getPropertyValue("z-index");
if(index > 0)
{
document.getElementById("mononoke2").style.zIndex = "-30";
}
else
{
document.getElementById("mononoke2").style.zIndex = "100";
}
}
I've been looking for a way to style a couple of <select> tags in a madlib-esque fashion.
I want the select box width to be based on what is selected and not show extra whitespace.
I'm looking for a way to make this as cross-browser compatible as possible right now it works fine in webkit but the dreaded arrows show in firefox.
Progressive enhancement JS only, fallback to regular select field.
Here is my fiddle: http://jsfiddle.net/bXJrk/
Any help on achieving this would be greatly appreciated.
$('select').each(function(){
var width = $('option[value='+$(this).val()+']').html();
$('body').append('<span id="'+$(this).val()+'" style="display:none">'+width+'</span>');
var two = $('#'+$(this).val()).width();
$(this).width(two+4).addClass('jsselect');
});
$('select').change(function(){
var width = $('option[value='+$(this).val()+']').html();
$('body').append('<span id="'+$(this).val()+'" style="display:none">'+width+'</span>');
var two = $('#'+$(this).val()).width();
$(this).width(two+4);
});
This is what I got out.
The fiddle: http://jsfiddle.net/wAs7M/4/
Javascript:
$('.replacementcontainer select').each(function(){
var apply = function(el){
var text = $('option[value='+el.val()+']').html();
var span;
if (el.data('initialized'))
{
span = el.parent().next().html(text);
}
else
{
el.data('initialized', true);
el.after('<span id="'+el.val()+'" class="jsselect hiddenspan">'+text+'</span>');
el.wrap($('<span class="selwrapper"></span>'));
span = el.parent().next();
span.addClass('jsselect');
el.addClass('jsselect');
}
el.parent().width(span.width() + 5);
var two = span.width();
};
apply($(this));
$(this).change(function(){ apply($(this)); });
});
CSS:
*{font-family:sans-serif;font-size:15px}
.replacementcontainer {
margin: 10px;
}
.replacementcontainer span {
display: inline-block;
margin-bottom: -4px;
}
.jsselect {
color: #3084CA;
text-decoration: underline;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
outline: none;
}
.selwrapper {
display: inline-block;
overflow: hidden;
}
.hiddenspan {
visibility:hidden;
position:absolute;
}