I am using ScrollMagic on my page. Here is the HTML:
<div class="container">
<div class="before-trigger">
</div>
<div class="trigger" id="trigger">
</div>
<div class="pin-area" id="pin-area">
This is a pinned area.
</div>
<div class="content">
Lorem ipsum ...
</div>
</div>
Here is my Javascript:
var controller = new ScrollMagic.Controller();
var scene1 = new ScrollMagic.Scene({triggerElement: "#trigger", triggerHook: 'onLeave'})
.setPin("#pin-area")
.addTo(controller);
Here is the jsfiddle demo: https://jsfiddle.net/gg8t714q/2/
When scrolling down the page, the content area (div.content) overlaps with the pinned area. How can I hide the content in the overlap area without hiding the background image? In another word, I am able to see the background image in the pinned area.
You can add the same background items you have in your .container rule to your .pin-area rule as a work around. So .pin-area would be:
.pin-area {
background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg');
background-position: right bottom;
background-attachment: fixed;
font-size: 2em;
color: #fff;
padding: 30px;
border: 2px solid #fff;
text-align: center;
}
var controller = new ScrollMagic.Controller();
var scene1 = new ScrollMagic.Scene({
triggerElement: "#trigger",
triggerHook: 'onLeave'
})
.setPin("#pin-area")
.addTo(controller);
body {
padding: 0;
}
.container {
background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg');
background-position: right bottom;
background-attachment: fixed;
}
.before-trigger {
height: 200px;
}
.trigger {
min-height: 1
}
.pin-area {
background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg');
background-position: right bottom;
background-attachment: fixed;
font-size: 2em;
color: #fff;
padding: 30px;
border: 2px solid #fff;
text-align: center;
}
.content {
;
height: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<div class="container">
<div class="before-trigger">
</div>
<div class="trigger" id="trigger">
</div>
<div class="pin-area" id="pin-area">
This is a pinned area.
</div>
<div class="content">
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline
the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately
render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore.
</div>
</div>
Related
I have a page with three on-page links that should all smoothly animate scrolling to the anchor link, but only the first link scrolls smoothly. Incidentally, the first link is the only link "above" the anchored link. The other two links, which ignore the smooth scrolling script, are located above the link and first scroll to the top of the page before snapping to the anchored link. How can I configure it so that the links beneath the anchored link scroll up smoothly to the anchored link, without scrolling to the top first?
Here's what I have:
const links = document.querySelectorAll(".cta-btn a");
for (const link of links) {
link.addEventListener("click", clickHandler);
}
function clickHandler(e) {
e.preventDefault();
const href = this.getAttribute("href");
const offsetTop = document.querySelector(href).offsetTop;
$("input[id$='input']").focus();
$(".guitar-service-address>span.placeholder-location").hide();
scroll({
top: offsetTop,
behavior: "smooth"
});
}
$('#input').on("focus", function() {
$(".guitar-service-address>span.placeholder-location").hide();
});
$(function() {
$("span.placeholder-location + input").keyup(function() {
if ($(this).val().length) {
$(this).prev('span.placeholder-location').hide();
} else {
$(this).prev('span.placeholder-location').show();
}
});
$("span.placeholder-location").click(function() {
$(this).next().focus();
});
});
if ($(window).width() < 768) {
$(".placeholder-above").append($(".placeholder-float").text());
}
.container {
max-width: 990px;
}
.tab-placeholder {
display: none;
}
input[id="input"] {
width: 500px;
}
.guitar-service-address>span.placeholder-location {
position: absolute;
margin: 6px 8px;
color: #686e74;
cursor: auto;
font: Helvetica 15px/20px bold;
font-weight: bold;
z-index: 1;
}
.guitar-service-address>.placeholder-location>.font-alt {
color: #686e74;
font-weight: normal;
}
input {
padding: 5px;
font-size: 11pt;
color: black;
border: 1px solid #979797;
border-bottom: 4px solid #000;
}
.help-block {
font-size: 90%;
}
.test {
padding: 20px;
}
.section {
padding: 150px 20px;
}
#head {
background-color: #ddd;
padding: 10px 20px;
}
#ckav {
background-color: #d4d4d4;
}
#cta {
background-color: #fdfd4d;
}
#media (max-width: 768px) {
input[id="input"] {
width: 300px;
}
span>.placeholder-float {
display: none;
}
.tab-placeholder {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section" id="head">
<div class="container">
<h2>CTA</h2>
<div>
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment.
</div>
<div class="cta-btn">
Check your guitar
</div>
</div>
</section>
<section class="section" id="ckav">
<div class="container test">
<div class="row">
<div class="col-sm-12">
<div class="placeholder-above"></div>
<div class="guitar-service-address">
<span class="placeholder-location"><span class="placeholder-float">Find guitar repair specialist. </span><span class="font-alt">Enter your guitar make and model...</span></span>
<input id="input" type="text" />
</div>
<p class="help-block">What is this?</p>
</div>
</div>
</div>
</section>
<section class="section" id="stuff">
<div class="container">
<h2>Stuff</h2>
<div>
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. Efficiently unleash cross-media
information without cross-media value.
</div>
<div class="cta-btn">
Check your guitar
</div>
</div>
</section>
<section class="section" id="cta">
<div class="container">
<h2>CTA</h2>
<div>
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment.
</div>
<div class="cta-btn">
Check your guitar
</div>
</div>
</section>
Here's a fiddle: http://jsfiddle.net/Codewalker/6or8pwjx/
Just add this to the CSS. you don't even need Javascript/Jquery.
* {
scroll-behavior: smooth;
}
👉 Check it in action on Jsfiddle
I would like to make a cell to not move in sortablejs.
All items are draggable and sortable except for .clearing. However, you can move any other divs around or in front of .clearing and force it to move. Try to move A or B to the beginning of the grid (left top corner) and observe .clearing is pushed down the grid.
I would like to disable that and ensure .clearing can not be moved at all. Thanks
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
https://codepen.io/zocoi/pen/xxbogZw
EDIT: updated screenshot, description and codepen with current undesired behaviour
Select which elements are draggable.
$(()=>{
const wrapper = $("#wrapper")[0]
Sortable.create(wrapper, {
draggable: '.box'
})
})
Codepen
Alternatively, you can use draggable: 'div:not(.clearing)' or something similar.
Since sortable.js actually re-orders the HTML all we need to do is determine the location of the "clearing" div and the natural grid flow will take care of the rest.
Remove the "clearing" filter from the sortable.js code and lock the required div into its required place in the grid with:
grid-row:1;
grid-column:1
$(()=>{
const wrapper = $("#wrapper")[0]
Sortable.create(wrapper)
})
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: 120px 120px 120px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
cursor: grab;
}
.clearing {
background-color: blue;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
grid-row:1;
grid-column:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper" id="wrapper">
<div class="clearing" title="but I can be moved by moving others around me">Can't move me</div>
<!-- should not allow dragging any element before this .clearing, try to drag A before here and it does move -->
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
Basically I've made in jsfiddle the kind of thing I'm looking for. But it's meant using a contenteditable div rather than textarea. I don't mind if the div is 100% width, but I'd like the height 38px (to represent 2 lines of text).
The problem I'm finding is preventing more text from being entered when the entire area is already filled. Obviously I don't want to restrict this based on number of characters (and if I did that, I may as well use a mono-spaced font).
Any thoughts?
https://jsfiddle.net/v358Lpoq/2/
HTML...
<div class="writebox">
<div class="writeboxprefix">Comments:</div>
<div class="writeboxtext" contenteditable="true">
Lorem ipsum dolor si wdq wd qwdq wqd wqddwqe dwqdwq wdq wqd
wdq wqd wqd wqd wdqt
</div>
</div>
CSS...
.writeboxprefix {
height: 16px;
float: left;
background: white;
font-style: italic;
padding-right: 6px;
}
.writeboxtext {
background-attachment: local;
background-image: repeating-linear-gradient(white, white 15px, black
15px, white 16px, white 19px);
height: 38px;
resize: none;
}
.writebox {
font-family: Arial;
font-size: 10pt;
line-height: 19px;
display: block;
overflow: hidden;
}
I am preparing a layout for a blog and need to make a slideshow more or less as follows:
I'm already able to do a lot via CSS, but I have a problem! The images only activate when the mouse hovers over the div, but I need the image to be activated, or better, be colored, when hovering over the image link.
Could someone help me out with this?
Take my code via BOOTPLY
Bootply
I do not know if I do this via CSS or only via JavaScript. I even tried to do more via JavaScript but do not know much about it.
You need to use the pseudo-class :hover on the parent of the image and text. This will change the opacity of the image when you hover over any child of that element.
Change this
.img-box-feature:hover{opacity:1;}
to this
[class*="box-"]:hover .img-box-feature{opacity:1;}
See updated Bootply
Also, I suggest you change the classes from box-um, box-dois, and box-tres to just box. Then you can use .box:nth-child() or .box:nth-of-type() to target a specific one.
If you change this line:
.img-box-feature:hover {
opacity:1;
}
to this:
.img-box-feature:hover,
.img-box-feature.hover{
opacity:1;
}
you could use jQuery to toggle to new class:
$('.over-text-feature h1 a').on('mouseenter mouseleave', function(e) {
$(this).closest('[class^="col-"]').find('.img-box-feature').toggleClass('hover');
})
Bootply
try out the webkit filters
e.g. .img-box-feature2:hover{-webkit-filter: invert(100%);}
You could also use contrast (%), brightness (decimal), blur (px), or sepia (%)
It remains unclear to me if you want the images to active also when hovering over the text, or only when hovering over the text. I also wonder if you want all images to be active to just one.
In case you want all the images to only become active when hovering the text, you could move the text element to be the first child of .section-slider, and use the CSS sibling selector: ~.
Like this:
<section class="section-slider">
<div class="over-text-feature">
<h1>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</h1>
<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 box-um">
<div class="img-box-feature" style="background-image:url('http://lounge.obviousmag.org/a_boleia_da_ideia/2012/08/gatimonias-ou-maldita-curiosidade.html.jpg?v=20150627141437')"></div>
</div>
<div class="col-md-6 box-dois">
<div class="img-box-feature2" style="background-image:url('http://lounge.obviousmag.org/a_boleia_da_ideia/2012/08/gatimonias-ou-maldita-curiosidade.html.jpg?v=20150627141437')"></div>
</div>
<div class="col-md-6 box-tres">
<div class="img-box-feature2" style="background-image:url('http://lounge.obviousmag.org/a_boleia_da_ideia/2012/08/gatimonias-ou-maldita-curiosidade.html.jpg?v=20150627141437')"></div>
</div>
<div style="clear: both;"></div>
</div>
<div class="row">
<div class="col-md-3">01</div>
<div class="col-md-3">01</div>
<div class="col-md-3">01</div>
<div class="col-md-3">01</div>
</div>
</div>
</section>
/* SLIDER PRINCIPAL */
.section-slider{ background:#000; width: 100%;}
.img-box-feature{
width: 100%;
height: 0;
padding-bottom: 70% ; /* % of width, defines aspect ratio*/
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background:rgba(0,0,0,0.6);
opacity:0.3;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.img-box-feature2{
width: 100%;
height: 0;
padding-bottom: 35% ; /* % of width, defines aspect ratio*/
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background:rgba(0,0,0,0.6);
opacity:0.3;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.over-text-feature{ z-index:100;
position:absolute;
color:white;
display: inline-block;
vertical-align: middle;
bottom: 15px;
width: 95%;
left:10px;
border-left: 5px solid #fff;
padding-left: 10px;
}
.over-text-feature h1{ font-size: 1.8em;}
.over-text-feature h1 a{color: #00aeef;}
.section-slider .box-um{float: left; margin: 0px !important; padding: 0px !important;}
.section-slider .box-dois{float: right;margin: 0px !important; padding: 0px !important;}
.section-slider .box-tres{float: right; margin: 0px !important; padding: 0px !important;}
.over-text-feature:hover ~ .container .img-box-feature, .over-text-feature:hover ~ .container .img-box-feature2{opacity: 1;}
I have a simple tooltip which has long JavaScript code in the divs.
I would to make it is as simple way
could any one help please
here is my code
<div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool
<div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;">
<div class="tool_wrapper">
<div class="tooltip_top_new"></div>
<div class="tooltip_middle_new">
<div class="content">
<p>Please holder actuall text</p>
<p>Please holder actuall text</p>
</div>
</div>
<div class="tooltip_bot_new2"></div>
</div>
</div>
</div>
css
.tooltip_top_new{
background:url(../images/n_tooltip_top.png) no-repeat;
height:9px;
width:212px;
}
.tooltip_middle_new{
background:url(../images/n_tooltip_middle.png) no-repeat;
width:212px;
}
.tooltip_middle_new .content{
padding:2px 13px 1px;
}
.tooltip_middle_new .content p{
line-height: 1.3;
margin-bottom: 1em;
text-align: left;
}
.tooltip_bot_new2{
background:url(../images/n_tooltip_bot2.png) no-repeat;
height:21px;
width:212px;
}
.Question_di{
position:relative;
}
.pbc11_ttpos1_1Q_di {
border: 0 solid #FF0000;
}
.toolTip_new {
background: none repeat scroll 0 0 transparent;
color: #5C5C5C;
display: none;
font: 10px/12px Tahoma,Geneva,sans-serif;
left: -173px;
top: -90px;
position: absolute;
z-index: 1000;
}
the thing is that I have to copy & paste onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" where ever using the tooltips,I would like to avoid it.
JQueryTools includes a Tooltip module which will get rid of a big chunk of your code.
http://jquerytools.org/demos/tooltip/index.html
It's also possible to create tooltips with no JavaScript at all, using HTML and CSS along these lines:
<div class="has-tooltip">
<button class="huge red">You Know You Wanna...</button>
<div class="tooltip">Do NOT Press This Button.</div>
</div>
And in CSS:
.has-tooltip .tooltip {
position: absolute;
display: none;
<style code to position (with margin-left and margin-top)
and make the tooltip box look how you want>
}
.has-tooltip:hover .tooltip {
display: block;
}
Google "CSS Tooltips" to see lots of examples.