Topics, Specialist, Text
I have segments that look like little cards with words in them. I would like to unhide a description for the specific word when the user hovers over them.
The code I have is as follows with the concerned classes being "specialist", "specialist-text":
const spec = document.querySelector('.specialist')
const spect = document.querySelector('.specialist-text')
spec.addEventListener('mouseenter', () => spect.classList.remove('hidden'))
.hidden {
display: none;
}
<section class="topics">
<h3 class="large center my-1">Topics</h3>
<div class="width grid overflow">
<div class="topic-list-update">
<div class="card2 center btn2 specialist">Specialist</div>
</div>
<div class="topics-text">
<div class="specialist-text hidden">Specialist mathematics 1234</div>
</div>
</div>
</section>
And I don't understand why it's not working. I attempted with addEventListener('mouseover'), I have tried using document.getElementById and I tried to use a function instead of an arrow function.
I am receiving an error when launching the html file in firefox:
Uncaught TypeError: spec is null
<anonymous> http://127.0.0.1:5500/js/script.js:12
I am a complete beginner and I thank you in advance for your help.
The answer was to load the script at the very end of the body!
<body>
<div> What ever 1 2 3 4 <br/> 1 2 3 4</div>
<img>
<script src="script.js"></script>
</body>
Related
So I'm trying to remove multiple divs with content inside one div and I'm getting to a point that I'm about to give up because I can't do nothing,
<!--this div loads when the page is loaded, I can't find this code in my file) I extracted this from google dev tools) -->
<div id="table_wrapper">
<div class="table-header">//filters</div>
<div class="table">//table info</div>
<div class="table-footer">//more filters</div>
</div>
I just want this
<div id="table_wrapper">
<div class="table">//table info</div>
</div>
I already tried some solutions but the result is the same (nothing happens)
1
$(document).ready(function(){
$('.table-header').remove();
$('.table-footer').remove();
});
2
$(document).ready(function(){
$(".table-header,.table-footer").hide();
});
3
div#table_wrapper .table-header, .table-footer {
display: none!important;
}
I don't know what can I do more, I use
console.log("script #2: %o", document.getElementById("table_wrapper"));
to see if there are many changes but everything stays the same.
Try this in your style.css
.no-footer .datatables-header, .datatables-footer {
display: none;
}
$(".row-datatables-header,.row-datatables-footer").hide();
So I'm trying to add a print button to an html page. Most of the page is not supposed to appear in print, so I hide everything in print and then reveal only the one div that is supposed to be printed (or this is what I'm trying to do). But when I try the print button out, the resulting page is completely empty. The html structure of the page looks like this:
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
And here is the CSS that is supposed to hide everything except the div with the id "results_page" (of course the buttons in that div are also supposed to be hidden in print).
#media print {
*{
background-color:transparent;
}
div#fullpage .section, .print_trigger, .unprintable{
display:none;
}
div#fullpage #results_page{
display:block;
}
#result_image,
#result_text {
float: none;
margin: 50px;
}
}
The javascript function is pretty simple, depending on what button the user clicks it adds the "unprintable" class to the picture element and then prints the document (I'm not sure if the html, the css or the js are the culprit here, this is why I include all of this in the question):
function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}
So, given all of this, what could be causing the empty page my printer spits out?
For anyone who is having this problem(especially if using bootstrap), it may be a CSS issue and NOT a javascript issue.
My dilemma was that we had a print button towards the top of the page that called "window.print()" function. And it resulted in a blank print preview page. The weird part was that is was working completely fine several weeks ago.
So first, like many threads have mentioned, check that this is not a javascript issue indeed. My call to window.print() did truly bring up the print preview window(meaning we weren't accidentally overriding the print function with another variable somewhere.)
The issue was with Bootstrap's container and container-fluids classes not displaying for print modes. Apparently these classes are being told to be not displayable on print styles(presumably from bootstrap style sheet).
All I had to do was add the following CSS print rules:
.container, .container-fluid {
width: auto;
display: block!important;
}
and it displayed again! This is also hinted at through bootstrap documentation here: http://getbootstrap.com/getting-started/#support-printing
So in a nutshell, check if the CSS is the issue, and stop blaming that poor Javascript.
Here you go:
function print_stadtarchiv(print_picture) {
if(!print_picture) $('#result_image').addClass('unprintable');
return window.print();
}
It also looks like you have no DOCTYPE or html tags... This is likely to cause all sorts of rendering/not-rendering based issues.
<!DOCTYPE html>
<html>
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
</html>
To anyone having the same problem: I couldn't figure out what was causing it, but I could get it done using the window.frame approach elaborated in this answer.
I am trying to create a group of links or buttons that will change the content of a div
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
Each employee has a different image and description but each div are the same size, the first employee will be shown by default as so to have no empty space but when the other 3 are selected the div is filled with the respective div according to it, then you can cycle through the profiles as you wish. Here is my div structure
<div id="employee">
</div>
<div id="employee1">
</div>
<div id="employee2">
</div>
<div id="employee3">
</div>
<div id="employee4">
</div>
Here is the javascript im trying to use
<script type="text/javascript" charset="utf-8">
$('button').bind('click', function() {
$('div#employee').html($('div#employee' + ($(this).index()+1)).html());
});
</script>
All the help i can get would be really appreciated, im not that great at java script and really need a hand with this. Im not sure i explained myself very well but i did try.
Just to confirm, all the divs are hidden until the button is pressed, then the div for that employee will appear, except the first profile which will appear by default on load.
Thanks for your help in advance.
James
Here's a pretty simplified example. It may or may not be the most efficient, but it should do what you want. This is assuming that you're pre-loading all of the content into the divs, but just hiding it at the beginning. If you are wanting to dynamically load the content, then you'll want to use some ajax
HTML
<p><button id="button1">EMPLOYEE One</button></p>
<p><button id="button2">EMPLOYEE Two</button></p>
<p><button id="button3">EMPLOYEE Three</button></p>
<p><button id="button4">EMPLOYEE Four</button></p>
<p><button id="button5">EMPLOYEE Five</button></p>
<br/><br/>
<div id="employee1" class="employeeInfo">
Employee1 is a good employee
</div>
<div id="employee2" class="employeeInfo">
Emloyee2 is an alright employee
</div>
<div id="employee3" class="employeeInfo">
Emloyee3 is the best employee ever!
</div>
<div id="employee4" class="employeeInfo">
Employee4 is not a very good employee
</div>
<div id="employee5" class="employeeInfo">
Employee5 is about to be fired
</div>
Javascript
$(function(){
$("#employee1").show();
$("button").on("click", function(){
$(".employeeInfo").hide();
$("#employee"+String($(this).attr("id").substring(6))).show();
// OR if you don't want to have to give IDs to the buttons
// $("#employee"+String($("button").index($(this))+1)).show();
});
});
CSS
.employeeInfo {
display: none;
}
JSFiddle
So let's say I have this scenario of articles:
I have a photo in the left and the content of the article right after the image.
In the content area I have a reservation button.
If the article is reserved, then it will be displayed a small image over the bottom of the photo (transparent written "Reserved").
This stuff is all done.
What I want to do next is to remove the hyperlink-button "Reserve" from the article if it's reserved. Should look like this:
-NormalIMG- [Reservation-Button]
-NormalIMG- [Reservation-Button]
-ReservedIMG- *
-NormalIMG- [Reservation-Button]
-ReservedIMG- *
-NormalIMG- [Reservation-Button]
and so on.
*here's no reservation button
So it's something like this:
Reserve
<!-- reserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"><img src="reserved.jpg" /></div>
<div class="content">
Reserve
</div>
</div>
<!-- reserved article //-->
<!-- unreserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"></div>
<div class="content">
Reserve
</div>
</div>
<!-- unreserved article //-->
<!-- reserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"><img src="reserved.jpg" /></div>
<div class="content">
Reserve
</div>
</div>
<!-- reserved article //-->
I tried with jQuery something like this:
if(!($('.image-reserved').find(img))) {
$('.reserveLink').addCSS('display', 'none');
}
But I got all the "Reserve" links removed...
I realized that I need something that should apply that CSS attribute only after the element 'img' was found.
After that, it should continue the search and apply it when it has to.
I lost all my day trying to figure out a way to get out of this by implementing different structures (using find, has, next, etc.) similar to the above example... but no success.
I'm posting here as a last resort, my hope is completely lost to something that seemed to be so easy to implement...
IMPORTANT NOTE: I know the structure looks weird and it might be really hard for what I want to be implemented, but I am not allowed to modify any code that was written already.
You shoud iterate over each image-reserved :
// For each image reserved
$(".image-reserved").each(function(){
// Count the children
var count = $(this).children("img").length;
// If there's a child (The reserved img), then we delete the following links
if(count > 0){
$(this).next().children(".reserveLink").hide();
}
});
$('.image-reserved').next().hide()
I'd suggest:
$('.content').filter(function(){
return $(this).prev('div.image-reserved').find('img').length;
}).find('a').remove();
JS Fiddle demo.
References:
filter().
find().
prev().
remove().
$('div.image-reserved:not(:empty)+.content a.reserveLink') will find all .image-reserved divs that have content, and select the .reserveLink links in the .content element after them.
I have
<div class='line'>
<div class='chord_line'>
<span class='chord_block'></span>
<span class='chord_block'>E</span>
<span class='chord_block'>B</span>
<span class='chord_block'>C#m</span>
<span class='chord_block'>A</span>
</div>
<div class='lyric_line'>
<span class='lyric_block'></span>
<span class='lyric_block'>Just a</span>
<span class='lyric_block'>small-town girl</span>
<span class='lyric_block'>living in a</span>
<span class='lyric_block'>lonely world</span>
</div>
</div>
(Excuse me for not being too familiar with proper css conventions for when to use div/spans)
I want to be able to display them so that each chord_block span and lyric_block span is aligned vertically, as if they were left-aligned and on the same row of a table. For example:
E B C#m A
Just a small-town girl living in a lonely world
(There will often be cases where an empty chord block is matched up to non-empty lyric block, and vice-versa.)
I'm completely new to using CSS to align things, and have had no real understanding/experience of CSS aside from changing background colors and link styles. Is this possible in CSS? If not, how could the div/class nesting structure be revised to make this possible? I could change the spans to divs if necessary.
Some things I cannot use:
I can't change the structure to group things by a chord_and_lyric_block div (and have their width stretch to the length of the lyric, and stack them horizontally), because I couldn't really copy/select the lyrical lines continuously in their entirety, which is extremely critical.
I'm trying to avoid a table-like solution, because this data is not tabular at all. The chord line and the lyric line are meant to be read as one continuous line, not a set of cells. Also, apart from the design philosophy reasons, I think it might have the same problems as the previous thing bullet point.
If this is possible, what div/span attributes should I be using? Can you provide sample css?
If this is not possible, can it be done with javascript?
EDIT: I'm sorry I wasn't clear at the start, but I would like a solution that allows both the chord line and the lyric line to be "selectable" and continuous.
Original Attempt... ---> CSS Tables Demonstration
div.line {
display:table;
}
div.line > div {
display:table-row;
}
div.line > div span {
display:table-cell;
vertical-align:middle;
}
For empty blocks, place html entity for non-breaking space as their contents. This should do what you want, if not, then I may have misunderstood.
SPECIAL NOTE: Compatibility for display:table-* is limited. More information
NEW EXAMPLE: Quite sure this is what you are looking for. --->
Demonstration
CSS
.block {
margin-top:1.5em;
position:relative;
display:inline-block;
}
.block .chord {
font-weight:bold;
font-size:0.8em;
position:absolute;
top:-1em;
}
HTML
<div class="block">
<div class="chord"></div>
<div class="lyric"></div>
</div>
<div class="block">
<div class="chord">E</div>
<div class="lyric">Just a</div>
</div>
<div class="block">
<div class="chord">B</div>
<div class="lyric">small-town girl</div>
</div>
<div class="block">
<div class="chord">C#m</div>
<div class="lyric">living in a</div>
</div>
<div class="block">
<div class="chord">A</div>
<div class="lyric">lonely world</div>
</div>
It looks interesting to me so I just searched over it and find following article that is discussing similar problem:
Create a table using CSS
I checked it here:
http://jsfiddle.net/MdzDp/
I think you need to use DIVs and SPANs instead of ULs and LIs here.
A similar question was asked once, and the only workable solution was indeed a combined "chords and lyrics" block (with the chords having a combination of position: absolute and position: relative). It's the only way I can think of if you want this to work reliably and in edge cases like different font sizes and so on.
JSFiddle example
Now this doesn't do exactly what you need: It doesn't allow continuous selection of lyrics. But I can think of two general directions to extend it.
A) Chords as background images: If the Chord symbols
C# E# Em Am
could be background images instead of actual text, you could use my code example and give the chord_block class a background-image of whatever Chord is in question. The image would have to contain the Chord (e.g. Em) as text. The upside is that this keeps the "lyrics line" intact. The downside is that this is not accessible, not resizable, and possibly problematic in print because many browsers don't show background images when printing.
B) Using jQuery: Using the approach shown in the JSFiddle, you have elements of the class chord_block that are already in the correct position. It should be half-way easy to use jQuery to create a new element on the fly, and add it to the document at the x/y position of each chord_block but outside the line, so you can still select the whole lyrics line without interference.
here's a crappy way to do it... i'd try more, but christmas dinner is served :)
<head>
<style type="text/css">
div.line {width:100%;}
div.line div.chord_line div.chord_block, div.line div.lyric_line div.lyric_block {width:20%; float:left;}
div.lyric_line {clear:left;}
</style>
</head>
<body>
<div class='line'>
<div class='chord_line'>
<div class='chord_block'>...</div>
<div class='chord_block'>E</div>
<div class='chord_block'>B</div>
<div class='chord_block'>C#m</div>
<div class='chord_block'>A</div>
</div>
<div class='lyric_line'>
<div class='lyric_block'>...</div>
<div class='lyric_block'>Just a</div>
<div class='lyric_block'>small-town girl</div>
<div class='lyric_block'>living in a</div>
<div class='lyric_block'>lonely world</div>
</div>
</div>
</body>
EDIT:
if you're open to structural changes, here you go:
<head>
<style type="text/css">
#chord_block {float:left; padding:2px; text-align:left;}
</style>
</head>
<body>
<div id="chord_block">
<div id="chord"></div>
<div id="lyric"></div>
</div>
<div id="chord_block">
<div id="chord">E</div>
<div id="lyric">Just a</div>
</div>
<div id="chord_block">
<div id="chord">B</div>
<div id="lyric">small-town girl</div>
</div>
<div id="chord_block">
<div id="chord">C#m</div>
<div id="lyric">living in a</div>
</div>
<div id="chord_block">
<div id="chord">A</div>
<div id="lyric">lonely world</div>
</div>
</body>
let the down-voting begin ...
as much as I love css, sometimes tables are worth using.
let me clarify, if you can pull it off with css and div's, it's all good; but if you have to spend hours trying to figure the simplest (with tables) layout out -- I think you're wasting your (and your client's) time and money.