I'm trying to get the height of every h2 in a div, then if that height is higher than 21px, apply a class to that h2 or change his css.
The reason for that is that I have my project titles overlapping the tags when they're longer than a single line :
http://www.elisagilis.be
so far I've tried this :
$('.post-details h2').each(function(){
if($(this).height() > 21)
{
$(this).css({"margin-top": "315px", "line-height": "28px"});
}
});
AND this :
$('.post-details h2').each(function(){
if($(this).height() > 21)
{
$(this).addClass('margintop');
}
});
None of them work.
I've tried without using each as well, didn't work because it would select all of my h2 and apply the css/class to all of them.
- if you have a better solution than the ones I'm considering they're welcome as well.
Many thanks for your help!
I think this is what you are looking for
<h2>some text</h2>
<h2>some text<br>some more</h2>
.border {border:1px solid blue;}
$('h2').each(function(){
alert($(this).height());
if($(this).height() > 30)
{
$(this).addClass('border');
}
});
Just change it to your preferences.
https://jsfiddle.net/370mg7ak/1/
maybe this is what you want: FIDDLE
HTML
<div class="cta">
<span class="cta-title">one line</span>
</div>
<div class="cta">
<span class="cta-title">one line</span>
</div>
<div class="cta">
<span class="cta-title">this will take up two lines</span>
</div>
CSS
.cta { width: 100px; float: left; height: 100px; border: 1px solid black; }
.cta-title { width: 100%; color: white; background: black; display: inline-block; }
.two-line { background-color: red; }
jQuery
$(document).ready(function() {
$(function(){
var $tArray = $('div.cta').children('span');
$tArray.each(function(){
if ($(this).height() > 18) {
$(this).addClass('two-line');
}
});
});
});
In order to make the values change dynamically as the window is resizing, try this:
$(window).on("resize", ".post-details h2", function(){
if($(this).height() > 21)
{
$(this).addClass('margintop');
}
});
This attaches to the window's onresize event and filters the events based on the ".post-details h2" selector. However, in this case you may also have to account for if the page size is made larger again, then you also need the initialize case.
//Initial setup
$(".post-details h2").each(function(){
if($(this).height() > 21)
$(this).addClass('margintop');
});
//On window resize
$(window).on("resize", ".post-details h2", function(){
if($(this).height() > 21)
$(this).addClass('margintop');
else
$(this).removeClass('margintop');
});
I would probably remove the position:absolute; from the <p> tag and let the elements flow naturally. This way you won't have to worry about maintaining any extra javascript.
To get the 20px padding you have at the bottom you could add this style:
.post-details > a, .post-details p { transform: translateY(-20px); }
Replace the following code
$('.post-details h2').each(function(){
if($(this).height() > 21)
{
$(this).css({"margin-top": "315px", "line-height": "28px"});
}
});
with
$(function(){
$('.post-details h2').each(function(){
if($(this).height() > 21)
{
$(this).css({"margin-top": "315px", "line-height": "28px"});
}
});
});
I ended up grouping my elements in a single div that I positioned with css only.
Related
i am trying to implement a feature on a menu that i am working on.When i scroll more than 50 pixels, let's say, i want to make the background color black, for example. Here is my code:
function myFunction() {
var x = document.getElementById("test");
if ( document.body.scrollTop > 50 || document.documentElement.scrollTop > 50 ) {
x.classList.toggle("change");
}
}
#test {
background-color: #d2d2d2;
height: 90px;
position: fixed;
top: 0px;
left: 0px;
}
.change {
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onscroll="myFunction()">
<div id="test">
<p>
Wow, this is some really nice text, now isn't it?
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="demo">
Kachow, another text.
</div>
</body>
As you can see, the background colour won't change. If you look at the CSS rules, you can see that the extra colour is added, but crossed off (in FireFox). Would you know why?
JSFiddle Demo: https://jsfiddle.net/TakeDown/7djmqkzL/12/.
Thank you for your time!
The id selector has a higher specificity than a plain class selector. Meaning your class css won't override the id one. So you need to create a selector that has a higher specificity, and in your case just tag on the id selector:
#test.change {
background-color:black;
}
If you don't want to tie it to a particular id, you can tag on the element name instead to make the specificity higher
div.change {
background-color:black
}
Can read more about css selector specificity on MDN or in the spec at here
Demo
function myFunction() {
var x = document.getElementById("test");
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
x.classList.add("change");
} else {
x.classList.remove("change");
}
}
#test {
background-color: #d2d2d2;
height: 90px;
position: fixed;
top: 0px;
left: 0px;
}
#test.change {
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onscroll="myFunction()">
<div id="test">
<p>
Wow, this is some really nice text, now isn't it?
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="demo">
Kachow, another text.
</div>
</body>
If you want to get rid of graphical glitches don't use toggle
x.classList.toggle("change");
Instead, just set it to black when the scroll is 50
x.style.background = "black";
I am using jQuery to change a fixed div at the top of the screen top:0.
When the scroll gets to a certain point the class is changed and CSS is changed. Great.
However, I was looking for a better way. Since I am changing it when it reaches 30px away from the content block, doing what I did below doesn't work well since it is using a fixed height:
$(function(){
$(document).scroll(function() {
var x = $(this).scrollTop();
if(x > 2025) {
if($(window).width() > 950) {
$('.topFullWidthWhite').addClass('nonStick');
}
} else {
$('.topFullWidthWhite').removeClass('nonStick');
}
});
});
SO...
Is there a way of doing something more along the lines of...
if(x <= 20 from /* HTML ELEMENT */){
//DO WHATEVER HERE
}
If there is a way of doing this relative to other elements rather than document height that would be grand.
Thanks!
Try to make use of offset().top for that particular element after which you want to change the css
$(window).on("scroll", function() {
var two = $(".two").offset().top;
if ($(this).scrollTop() > two - 20) {
$(".two").addClass("reached");
} else {
$(".two").removeClass("reached");
}
})
body {
margin-bottom: 400px;
}
.one {
height: 150px;
background: green;
margin-bottom: 20px;
}
.two {
height: 100px;
background: blue;
}
.two.reached {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>
I have several div elements aligned in a grid. I want them to have their specific different background images when the user hovers over them which disappear when the mouse leaves the div. Basically it's a users information page where every square has the data of a user. When people hover over the squares, the users' images appear as background images. Here's the HTML:
<div class="contributor">
Some great stuff here
</div>
Here's the jQuery code I'm currently using. The problem: It assigns the same image to every div while I want different images for each div.
$(document).ready(function(){
$('.contributor').mouseenter(function(){
$(this).addClass('visible');
});
$('.contributor').mouseleave(function(){
$(this).removeClass('visible');
});
});
Here's the code for the 'visible' class:
.visible{
background-image: url('../res/dev-1.png');
}
Why do you use jQuery? use just CSS and pseudo-class :hover.
.contributor:hover{
background-image: url('../res/dev-1.png');
}
apply for diffrent div:
.contributor.diff-div:hover{
background-image: url('../res/dev-2.png');
}
If you can do something in the CSS, it is almost always it will be a better solution than using JavaScript
First, save the image url in an attribute named "imageurl" (which isn't parsed by the browser):
<div class="contributor" imgageurl="../res/dev-1.png"></div>
<div class="contributor" imgageurl="../res/dev-2.png"></div>
Then, use this jQuery code:
$('.contributor').mouseenter(function(){
var imgageUrl = $(this).attr("imageurl");
$(this).css("background-image" , imgageUrl);
});
$('.contributor').mouseleave(function(){
$(this).css("background-image" , "none");
});
Of course, you also have to build the HTML dynamically.
may be you can consider css function instead of addClass.
$(document).ready(function(){
$('.contributor').mouseenter(function(){
if(this.id == "one")
$(this).css("background-image" , "url('../res/dev-1.png')");
else if(this.id == "two")
$(this).css("background-image" , "url('../res/dev-2.png')");
});
$('.contributor').mouseleave(function(){
$(this).css("background-image" , "none");
});
});
Try this with jquery. suppose you have six images from dev-1.png to dev-6.png then it will set them as bacground for div number 1 to 6 respectively
$(document).ready(function(){
$('.contributor').mouseover(function(){
var index = $("div").index(this);
index++;
var bI= "background-image:url('../res/dev-"+index+".png');";
$("this").eq(index).attr('style',bI);
});
$('.contributor').mouseleave(function(){
var index = $("div").index(this);
index++;
var bI= "background-image:none";
$("this").eq(index).attr('style',bI);
});
});
For reference (Too troublesome and Won't apply if you have a ton of elements)
This can be achieved with pure CSS.
images might take a second to load (random image services)
Working example: (not responsive open in full page)
.optionlist li {
background: #111;
color: #999;
padding: .5em;
list-style-type: none;
border: 1px solid;
max-width: 70px
}
.optionlist li:hover {
background: red;
}
.optionlist li:hover:after {
content: '';
width: 800px;
height: 600px;
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Start Background Control */
#red:after {
background: url(http://lorempixel.com/800/600/)
}
#blue:after {
background: url(http://lorempixel.com/800/601/)
}
#green:after {
background: url(http://lorempixel.com/801/600/)
}
#yellow:after {
background: url(http://lorempixel.com/801/601/)
}
#orange:after {
background: url(http://lorempixel.com/799/600/)
}
#white:after {
background: url(http://lorempixel.com/800/599/)
}
#black:after {
background: url(http://lorempixel.com/801/599/)
}
/* End Background Control */
<div class="optionlist">
<ul>
<li id="red">Red</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
<li id="yellow">Yellow</li>
<li id="orange">Orange</li>
<li id="white">White</li>
<li id="black">Black</li>
</ul>
</div>
I made this page with three sections that have full width and height, but i don't know how to make them scroll horizontally and not vertically, i tried this source:
CSS-tricks: Horizontal scrolling but it doesn't work on my code...
Here is my code:
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
}
.element {
flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }
<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>
The horizontal scrolling is working as expected, please check the code below. From your reference the demo uses a jquery plugin. You need to include jQuery and jQuery mousewheel plugin for it to work. :)
$(function() {
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
}
.element {
flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>
You just need to change body style
body {
margin: 0;
display: block;
}
I think you might be missing some js files in your page. Make sure to add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>
<script>
$(function(){
$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
$(".post").wrap("<td></td>");
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
Here is a JSFiddle with a working example
https://jsfiddle.net/ybvsyt0p/
I think using JavaScript together with your CSS will produce the "Horizontal Scroll" effect you need:
Define HTML AND BODY as selectors use a base method like "mousewheel", and notice the placement and scope of this as it references its parent object (the page) via mousewheel.
delta can be used to work with values that are consistent with the user interaction and scrollLeft is a property in CSS 2 and a method in CSS 3 (I.e., scrollLeft() works in most browsers.
$("html, body").mousewheel(
function
(event, delta) {
this.scrollLeft *= -30;
}
)
I'm trying to achieve the effect of a sliding div using the jquery animate option. I'm able to "slide" the parent div up but I'm having issues with showing the div behind the slider.
I've created this jsfiddle to show my issue.
Try uncommenting the photoOptions div. I'm trying to hide this div so it's only revealed when the parent div is slid up.
<div class="photoWrapper">
<!-- <div class="photoOptions"> This is your data. </div>-->
<div class="photoHolder">
Image Here
</div>
<div class="photoMeta">More data here</div>
<div class="photoCredits">
Trigger
</div>
</div>
Code
jQuery.fn.blindToggle = function(speed, easing, callback) {
var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
return this.animate({
marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h
}, speed, easing, callback);
};
$(document).ready(function(){
$(".trigger").click(function(){
$('.photoHolder').blindToggle('slow');
});
});
Current CSS:
.photoWrapper {
width:200px;
border: solid 1px #ddd;
}
.photoHolder {
border: solid 1px #eee;
width:200px;
height:266px;
}
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
}
Any thoughts on how I can achieve this?
The browser renders elements based on there place in the DOM, if an element preceeds another element in the dom, it is rendered under it.
To change this default behaviour, you should use the CSS rule z-index, by defining a lower z-index on your .photoOptions div, it will be rendered below it.
as seen in this fiddle
Also be aware that z-index values may be handled differently for elements that are positioned absolute, due to the fact that they are not rendered in the normal flow.
Using the callback on .blindToggle() can achieve that effect but you're going to have to edit your CSS so that .photoCredits is visible and just start off with .photoOptions hidden:
$(document).ready(function () {
$(".trigger").click(function () {
$('.photoHolder').blindToggle('slow', function () {
$(".photoOptions").show();
});
});
});
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
display:hidden;
}