I have two h1 elements, one is a subtitle and is placed behind the first one using z-index. I want to have a click on the first h1. This click needs to go to jQuery because I'm going to use it to stop playback of a video amongst other things. I used to have a click on the first h1 itself, but since its a block element this wasn't ideal as it was stretched over the whole page width. So I replaced that with a dummy anchor .
My problem is that I can't get the subtitle h1 to stop blocking the title h1. Even when using z-index. Somehow it keeps blocking the first h1
Ideally the text in both h1's is clickable, but I prefer the title to be clickable.
<div class="title-box">
<h1 class="content-title">
FooFooFooFooFoo
</h1>
<h1 class="content-subtitle"> Bar </h1>
</div>
Fiddle with my problem: https://jsfiddle.net/nL5pn4w2/4/
z-index only works on positioned elements position:absolute , position:relative , or position:fixed
Another option would be to have the non-link h1 ignore pointer events pointer-events: none;
jsfiddle
Related
The navigationlink "Leistungen" (marked black in below image) is linking to an anchor where you can find an carousel-slider. The submenu is doing the same + firing the function to slide to the relating carousel-slide.
Beglaubigungen
But out of some reason if you load the following site and try it, its jumping too far (following image): https://bm-translations.de/
The strange thing is, if you then click a 2nd time the same navigation link, it is jumping to the right anchor.
Why is this happening and how to solve this?
In your page, after clicking that menu link, it scrolls down to where that section is in the document.
It's scrolling down to a block element (I assume some JS script is smooth scrolling it to the ID):
<div class="row" id="leistungen"></div>
In your H2 element directly inside of that div, you have your heading with some padding on top:
<h2 style="text-align:center;font-size:24px;padding-top:30px">Leistungen Ihres Übersetzungsbüros</h2>
If you added that padding yourself, go ahead and increase that to 90px (or whatever amount you want).
Or else just add this to the bottom of your css file:
#leistungen > h2 { padding-top: 90px; }
The only alternative is to edit the JS that's creating the smooth scrolling feature.
EDIT: I'd even recommend streamlining your H2 padding in css, not on the page... each of your H2's have their own unique padding-top.
Before:
After:
Found a Solution:
<a onclick="document.getElementById("carousel-selector-1").click();location="https://bm-translations.de/#leistungen"">Beglaubigungen</a>
js and provided a heading inside the Particle-js div. But now I can't use heading1:hover. I already tried
#particles-js {pointer-events : none;}
But it did not work.
Link to my website (you can use inspect): http://freshdesignz.000webhostapp.com/
The problem is, that particle-js overlaps the h1 tag. A possible solution would be to set the z-index for your h1 to a value > 0.
The problem you'll face than is that the mouse pointer only triggers the hover of your h1 and not the particle effect if you focus on the h1 element. You can reduce the with of the h1 to improve the ux
I want to have an image that when clicked will fade out and display text "behind it". Right now all I can do is have my text appear above or below the image depending on where I move the element in the html file.
If I can figure this out the plan is to have the text display:none and image display:block then have them toggled by an action of clicking on the image / clicking on the text div.
If this doesn't make sense I can try to clarify.
I am working on my "tribute page" for free code camp. This is not a requirement but something extra I want to accomplish. The idea is to have my main image fade away and display the list items for "job history and Python timeline". Everything is commented in my code pen link below. In question are the final two div elements "main image" and "job History and Python timeline"
Here is a link to my code pen
<!-- job history and Python timeline -->
<div id="history-timeline" class="text-center" style="display:show; inline">
<p>
<ul>
<li>
<li>
<li>
<li>
</div>
Add position:absolute to your image, so it will be out of the page flow and img will stack over h2. now you can hide the image on click. I used display:none on hover of div. make sure your parent div height match the height of image.
.hide_on_hover{
width:200px;
height:200px;
}
.hide_on_hover img{
position:absolute;
}
.hide_on_hover:hover img{
display:none;
}
<div id="main-image-div" class="text-center hide_on_hover">
<img
id="main-image"
src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg"
class="rounded img-thumbnail " width="200" height="200">
<!-- job history and Python timeline -->
<h2 id="history-timeline">does this work</h2>
</div>
This can easily be accomplished by adjusting the positioning and z-indexing.
Your parent div element will want to have a position: relative attribute. The text will want to then have a position: absolute attribute. This will allow the text to overlap your image. Position relative tells the child element to position themselves respective to the closes parent with a relative attribute.
The next step is to apply a few more attributes to control the layer. From my understanding, you'll want the image to be the top layer, and the text be the lower layer. Solution for this is to apply position: relative; z-index: 2 to your image and add z-index: 1 to your text. The z-index attribute gives a layer order to the overlapping elements. We need to give position: relative to the image because the default position of that element ignore z-index attributes. Things should start looking closer now.
Now, you mentioned using a display: block and display: none attribute to hide your image and show the text. This would work based on the functionality you described, but will create a jump effect since setting to display: none loses height settings so you'll get things collapsing on your page. If you dont want this, you'll want to use visibility: hidden and visibility: visible instead.
However, what I would probably do instead is add a new css class:
.hidden{ opacity: 0 }
This way you can have simpler javascript and also can go to the extent of animating the fade effect. Speaking of Javascript, this would use the following code:
$("#main-image").click(function(){ $(this).toggleClass('hidden') });
Here's what some your modified code looks like:
HTML:
<div id="main-image-div" class="text-center" style="position: relative">
<img id="main-image" src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" style="margin-top:2%; position: relative; z-index: 2;" class="rounded img-thumbnail">
<h2 id="history-timeline" style="position: absolute; z-index: 1; ">does this work</h2>
</div>
CSS
.hidden{opacity: 0}
Outside the scope of this, you should avoid doing inline styling and have the html just use classes. Reference those classes in your css code and apply your styling there. This allows for cleaner, more manageable code as your site gets built up.
Try this code
$(document).ready(function(){
$("#main-image").click(function(){
$(this).removeClass('show-block');
$(this).addClass('hide-block');
$('#history-timeline').removeClass("hide-block");
$('#history-timeline').addClass("show-block");
});
$("#history-timeline").click(function(){
$(this).removeClass('show-block');
$(this).addClass('hide-block');
$('#main-image').removeClass("hide-block");
$('#main-image').addClass("show-block");
});
});
DEMO
Currently programming a web application that is a rendition of the Board Game Splendor for educational purposes. Right now I'm getting into the part of my coding where we will be handling events.
I'm looking to be able to have the user hover over the cards in the middle and have it dim displaying the word BUY at the top half and RESERVE at the bottom half. Then while hovering over the whole card the user can click either BUY or RESERVE depending on what they want to do.
My assumption right now of how to handle this would be to have a mouseover event in JavaScript for the whole div that contains the card image, and then to have two divs on top of that div (One for the top half and one for the bottom half) that each have separate click events since each will function differently.
I guess I'm wondering, will that be a problem since technically the whole card div will be beneath those two divs? And should I be looking to solve this problem with a different approach in the code? (I can't use things like jQuery in my project either, just HTML CSS and JS)
I would solve the problem using css, specifically using the :hover modifier. The BUY and RESERVE buttons would have display:none, but once you hover over the parent element, in this case the card, you can change to display: block. You can use both the z-index and position css properties to position both buttons anywhere on the card. For example
.card:hover {
position: relative;
z-index: 1;
.buy, .reserve { display: block; }
}
.buy, .reserve {
position: absolute;
z-index: 2;
display: none;
}
With html
<div class='card'>
<div class='buy'></div>
<div class='reserve'></div>
</div>
The two buttons that you are placing on top of each card can have CSS opacity elements on it's background-color property such as rgba(0,0,0,0.5) that allows the rest of the card to show underneath the two button divs and become partially transparent.
As for click events, you're right, the card itself will not be able to be clicked. However, you can access the card itself via event.target.parentNode in order to find what card you are clicking as well as manipulate the card itself on click.
is it possible to make a section within a contenteditable element permanent, so that a user cannot remove it?
I have an h2 tag in a contentEditable div. I don't want the user to edit the h2 tag, so I set contentEditable=false, but the user can still select and remove it, which I want to disallow.
So, for ex:
<div contentEditable="true">
<h2 contentEditable="false">My h2 tag</h2>
This is a div you can edit. But you can't edit or remove the h2 tag.
</div>
Nope, sorry, it's all-or-nothin'.
A work-around would be to grab the H2 tag and reinsert it after the edit is complete, using JavaScript.
Why not use position:absolute to move it above the div (maybe using a proper z-index) without being inside it (in the source)?
Remember to add some padding to your div in the space allocated for your h2.