Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am trying to create a page with images that upon a user hovering loads content into a div on the same page. So far, I have created the html file and the stylesheet. It's a fairly simple, table-based page, with three images that have the css hover effect on them and link to three different pages. My challenge is figuring out how to load content into the div. I am completely new to Javascript so this is going to be quite the learning curve I imagine but any help will be appreciated. I have attached an image to illustrate what I am trying to do. Thanks everyone]1
Updated question. Thanks for your input everybody. (Back from the holidays - will be going over suggestions)
My css code:
.Image1{
background-image:url('Image1_REG.jpg');
height:86px;
width:86px;
display: block;
}
.Image1:hover {
background-image:url('Image1_Shadow.jpg');
height:86px;
width:86px;
display:block;
}
.Image2{
background-image:url('Image2_REG.jpg');
height:86px;
width:86px;
display: block;
}
.Image2:hover {
background-image:url('Image2_Shadow.jpg');
height:86px;
width:86px;
display:block;
}
.Image3{
background-image:url('Image3_REG.jpg');
height:86px;
width:86px;
display: block;
}
.Image3:hover {
background-image:url('Image3_Shadow.jpg');
height:86px;
width:86px;
display:block;
}
#contentDiv{
height:150px;
width:350px;
left:50px;
top:150px;
position:absolute;
background-color:#452835;}
table {
width:600px;
height:auto;
column-width:200px;
left:150px;
top:150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="newStyle.css"></link>
</head>
<body>
<body>
<table>
<tbody>
<tr><img src="header.jpg" align ="center" /></tr>
<tr>
<td><a class="Image1" href="http://link1" target="_blank"></a>
</td>
<td>
<a class="Image2" href="http://link2" target="_blank"></a>
</td>
<td><a class="Image3" href="http://link3" target="_blank"></a></td>
</tr>
</tbody>
</table>
<div id="contentDetails">Where the hover text is to be displayed</div>
</body>
</html>
You'll need a small bit of JavaScript but nothing you can't learn in half an hour. I'd advise you read the MDN JS primer but only to get a grasp for how JS works.
In essence you need to locate the element you want to hover over and then have multiple <div>s on your page containing your content. You add a JavaScript mouseover event on the elements you want to hover over and in the callback function you supply to it you tell it to hide all the divs and then display only the div you want.
I think you should be able to work out everything from these pages:
How to get an element in JS
How to add a mouseover event
How to hide and show elements
Best of luck with it. If you're stuck once you've written some code feel free to edit your question and comment on mine (so I know to take a look) and I'll try help.
Here's a very basic example I created that will help get you started:
JS Fiddle:
http://jsfiddle.net/dvav1gdo/5/
HTML
<div class="module">
<div class="tabs">
<div class="tab">
<img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
</div>
<div class="tab">
<img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
</div>
<div class="tab">
<img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
</div>
</div>
<div class="tab-panels">
<div class="tab-panel active">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit unde inventore, aliquam architecto minus minima quis. Aliquid voluptates, dolorum ullam dicta nesciunt molestiae maiores! Ratione quasi officia recusandae laboriosam nihil voluptate perferendis fugiat quae provident aliquam harum id tenetur quisquam, ab repellendus suscipit eligendi temporibus facilis sapiente a veniam voluptatibus quidem in voluptatum vero. Soluta excepturi quisquam, sed, quas rem aperiam atque obcaecati nulla repellendus corporis? Consequatur aut quidem, earum enim asperiores. Libero deserunt dignissimos blanditiis est, repellendus qui molestiae tenetur quas assumenda officiis modi totam, quae ullam. Quaerat officiis tempora molestias voluptatibus sint quo incidunt nostrum quisquam sed excepturi?</p>
</div>
</div>
<div class="tab-panel">
<div class="content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="tab-panel">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error fugit harum voluptates. Deserunt adipisci libero incidunt nostrum similique laborum dicta, porro natus harum odit, voluptatum vitae, minima iure omnis. Odit, nemo incidunt voluptas placeat est quis ab dolor. Iure, corporis.</p>
</div>
</div>
</div>
</div>
CSS
.tab {
display: inline-block;
}
.tab-panel {
display: none;
&.active {
display: block;
}
}
jQuery
$(document).ready(function () {
var $tabs = $('.tab');
var $panels = $('.tab-panel')
// attach js event handler to all tab jQuery objects
$tabs.on('mouseover', function() {
var $this = $(this);
// get hover index
var hindex = $this.index();
// use the active class to show and hide correct panel based on current hover index
$panels.removeClass('active');
$panels.eq(hindex).addClass('active');
});
});
You could use the hover or click function to detect interaction with the image then you use the div id/name to change the text with query i believe its should be $("").text("Some info")
example:
<div style="height:100px; width:100px" class="title"> //*
first text
</div>
The code that you need in order to change the text in the div which his class name is "title" (SEE comment "//*" above):
$('div.title').text('Some info');
Also See for more information "Use jquery to set value of div tag":
Use jquery to set value of div tag
LINKS:
http://api.jquery.com/text/
http://api.jquery.com/hover/
http://api.jquery.com/click/
Also you can use #tanjir 's code as example:
$('#img1').hover(function(){
$('#contentDiv').text("content for text 1")
};
Remember that
$('#img1'). hover(function(){
// CODE EXECUTE HERE AFTER HOVER OF IMAGE 1
}
*** this example has # in the start because he use the id of the div instead of the class name! so it would look like:
<div ID="img1">
</div>
Is a listener that wait you to hover, when you will hover the code where the comment is will execute.
Related
This is my first post here.
i have a big problem. i am in a bootcamp, currently.
I have a site and sections
const bookmarkButton = document.querySelectorAll('.pictureBook')
bookmarkButton.forEach(function (setIt) {
setIt.addEventListener('click', () => {
setIt.classList.toggle('bookmarkChecked')
})
})
.pictureBook {
all: unset;
background-image: url(/img/bookmark-svgrepo-com.svg);
background-size: cover;
width: 100px;
height: 100px;
position: absolute;
top: -15px;
right: -10px;
cursor: pointer;
opacity: 0.5;
}
.bookmarkChecked {
opacity: 1;
}
<section class="main__section">
<h2 class="question__title">Frage</h2>
<p class="question__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eius
voluptatibus modi voluptates nisi quam expedita fugiat repudiandae
animi ab.
</p>
<button class="pictureBook"></button>
<button class="showanswer__btn">Antwort anzeigen</button>
<p class="answershowed hideanswer">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. A nemo
libero tempore dolore numquam dolorum sed cumque nihil explicabo
ullam.
</p>
</section>
Now i can click the bookmark "svg" and opacity gone to 100 % ( bookmark set, color black )
I have a button. and i want, only show the "classes" i added the class for bookmarked it.
I am on the Limit. Google doesn`t help. Maybe you can?
When i click another button in my footer, the site Show please only the active sections with the class bookmarkChecked.
Thank you very much.
A bookmarked button has the bookmarkChecked class. So you can use
querySelectorAll to choose only the bookmarked button.
Use forEach to loop over the list of buttons.
Inside the forEach callback get the corresponding section for each button using the closest method
Now you can hide the bookmarked section using a class to set display none.
If all this needs to happen after a button click, then do the following inside an addEventListener.
One thing I'm struggling to understand in my learning is the concept of the element and event objects. I understand JavaScript comes with a global window object and there are four other built in objects, Math, String,Array,Date. Am I correct in saying the document object is a property of the global window object ? How about the document Element Object and the Event Object, i can find the event object at all on the Window prototype. How does the event object come about? is it inherited when an event occurs?
According to w3schools website:
https://www.w3schools.com/jsref/dom_obj_event.asp#:~:text=HTML%20DOM%20events%20allow%20JavaScript,a%20user%20clicks%20a%20button).
“HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs.”
I think you could better understand the concept of events with the code that I posted. In that code, if you click the button, in the console you can find the properties of “click or MouseEvent” event.
For using that properties, I defined a “div” that when you click everywhere in that div, you find an alert that say the position of your click. I used “clientX” and “clientY” properties of "click" event.
function clickFunc(inp) {
console.log(inp);
}
function mousePlace(inp2) {
posX = inp2.clientX;
posY = inp2.clientY;
alert("x:"+posX+"y:"+posY);
}
.bg-red {
background-color: rgb(200,15,10);
height: 400px;
width: 80%;
margin: 2px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>events</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, illum, reiciendis! Perspiciatis corporis, iste dolore excepturi ipsa animi. Saepe assumenda quae, expedita facilis rerum provident vero illum reprehenderit consequatur suscipit illo. Qui atque ab sit tempore, laboriosam, officiis quisquam, cum harum libero rem architecto ipsam molestias accusantium quasi delectus? Quidem.</p>
<button onclick="clickFunc(event)">click me</button>
</div>
<div class="bg-red" onclick="mousePlace(event)">
</div>
<script src="script.js"></script>
</body>
</html>
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 2 years ago.
I'm trying to find multiple ways to close a sidebar menu that pops out from the left side. The idea of this is to have a page with an "Open/Close Menu" button. As expected this button should be able to open and close the menu with clicked, but I also want to include an option of closing it when simply clicking outside the menu bar.
My thought process behind this is to add a div that surrounds all of the content on the page, and gives it a class name of "notMenu". I would define the dimensions of this to be the entire page and give it a z-index of 1. When the menu pops up, it would be on top of .notMenu with a z-index of 2, yet I can't seem to get it to work.
var menuBtn = document.querySelector('.menuBtn');
var sidebar = document.querySelector('.sidebar');
var closeMenuBtn = document.querySelector('.closeMenuBtn');
var notMenu = document.querySelector('.notMenu');
var nav = 'closed'
menuBtn.addEventListener('click', function() {
if (nav === 'closed') {
sidebar.style.display = 'block'
nav = 'open'
} else {
sidebar.style.display = 'none'
nav = 'closed'
}
});
// closeMenuBtn.addEventListener('click',function(){
// sidebar.style.display = 'none'
// });
closeMenuBtn.addEventListener('click', function() {
sidebar.style.display = 'none';
nav = 'closed';
});
/*
notMenu.addEventListener('click',function(){
sidebar.style.display = 'none'
nav = 'closed';
})
*/
h1 {
text-align: center;
}
.menuBtn {
position: relative;
left: 50%;
transform: translateX(-50%);
}
.closeMenu {
font-size: 30px;
z-index: 2;
}
.sidebar {
position: absolute;
top: 0;
height: 100vh;
width: 300px;
background: grey;
display: none;
z-index: 2;
}
.notMenu {
position: absolute;
top: 0;
height: 100%;
width: 100%;
z-index: 1;
}
<body>
<div class="notMenu">
<h1> Header </h1>
<div class="sidebar">
<ul>
<li><a href=''>Link1</a></li>
<li><a href=''>Link2</a></li>
<li><a href=''>Link3</a></li>
</ul>
<button class="closeMenuBtn">Close Menu</button>
</div>
<button class="menuBtn">Open/Close Menu</button>
<div class="content1">
<br><br> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur quia ipsam optio, veritatis corrupti exercitationem quae itaque accusamus voluptas ipsa consequuntur nostrum, culpa, cum dolore incidunt ducimus harum minus doloremque?
</div>
<div class="content2">
<br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quia laboriosam ut accusantium itaque adipisci vitae error provident voluptate, dolorem veniam dignissimos atque accusamus aut rem quos esse fugit voluptas soluta laudantium.
Nam voluptates maxime sapiente, pariatur voluptatibus mollitia quia.
</div>
</div>
<!--closes .notMenu-->
</body>
CodePen Link
Alternatively, is there a way to do this without designated a new class as .notMenu? I assume there is a possibility to do this with e.target in JS with if statements.
function(e){
if (e.target !== 'sidebar'){
sidebar.style.display = 'none'
}
}
The issue I ran into with this is that e.target returns an object. I'm unable to define which objects represent the sidebar and which ones do not, therefore I can't determine if the area outside the sidebar is being clicked.
try this
window.addEventListener('mouseup', function(e) {
var x = document.querySelector('.sidebar');
if (event.target != document.querySelector(".icon")) {
x.style.display = "none";
}
});
var menuBtn = document.querySelector('.menuBtn');
var sidebar = document.querySelector('.sidebar');
var closeMenuBtn = document.querySelector('.closeMenuBtn');
var notMenu = document.querySelector('.notMenu');
var nav = 'closed'
menuBtn.addEventListener('click',function(){
if (nav === 'closed'){
sidebar.style.display='block'
nav = 'open'
}
else{
sidebar.style.display = 'none'
nav = 'closed'
}
});
closeMenuBtn.addEventListener('click',function(){
sidebar.style.display = 'none';
nav = 'closed';
});
// fire event if click is outside of sidebar and menubtn
window.onclick = function(event) {
if (event.target !== sidebar && event.target !== menuBtn) {
sidebar.style.display = "none";
console.log('clicked');
}
}
h1{
text-align:center;
}
.menuBtn{
position:relative;
left:50%;
transform:translateX(-50%);
}
.closeMenu{
font-size:30px;
z-index:2;
}
.sidebar{
position:absolute;
top:0;
height:100vh;
width:300px;
background:grey;
display:none;
z-index:2;
}
.notMenu{
position:absolute;
top:0;
height:100%;
width:100%;
z-index:1;
}
<div class="notMenu">
<h1> Header </h1>
<div class="sidebar">
<ul>
<li><a href =''>Link1</a></li>
<li><a href =''>Link2</a></li>
<li><a href =''>Link3</a></li>
</ul>
<button class="closeMenuBtn">Close Menu</button>
</div>
<button class="menuBtn">Open/Close Menu</button>
<div class="content1">
<br><br>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur quia ipsam optio, veritatis corrupti exercitationem quae itaque accusamus voluptas ipsa consequuntur nostrum, culpa, cum dolore incidunt ducimus harum minus doloremque?
</div>
<div class="content2">
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quia laboriosam ut accusantium itaque adipisci vitae error provident voluptate, dolorem veniam dignissimos atque accusamus aut rem quos esse fugit voluptas soluta laudantium. Nam voluptates maxime sapiente, pariatur voluptatibus mollitia quia.
</div>
</div>
try this
I've set up a Bootstrap collapse plugin to use with my list of frequently asked questions:
https://jsfiddle.net/2d8ytuq0/
<ul class="faq__questions">
<li>
..
<p class="collapse" id="faq__question_1">...</p>
</li>
</ul>
The problem is when you collapse back the extended description it kind of "jumps". I think this happens due to the bottom margin the p element has. I tried to replace it with padding-bottom, but this didn't solve the issue. Is there any way to fix this without breaking the original layout?
This problem causes because your collapsed element has a margin-bottom:15px.
Your new HTML markup
<div class="collapse" id="faq__question_1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nesciunt rerum mollitia nobis corporis sint error quaerat cupiditate animi doloribus! Voluptas dolores, incidunt perspiciatis labore velit libero minus consequuntur blanditiis.</p>
</div>
Simply add this css to override margin property..This works fine
.faq__questions > li p {
margin: 0;
}
You could always add a css transition to it.
I add an active state to the panels and to a css transition on the margin-top.
JS
// Add active class to open panel on faqs accordion
$('.faq__questions').on('show.bs.collapse', 'li', function () {
$(this).addClass('active');
});
$('.faq__questions').on('hide.bs.collapse', 'li', function () {
$(this).removeClass('active');
});
CSS
.faq__questions li .collapse{
margin-top: 0;
transition: all .2s ease-in-out;
}
.faq__questions li.active .collapse{
margin-top: 30px;
}
Is there a way to make the banner images that are displayed in the site below continuous? I mean, in the sample the current banner image is cut off on the left and in its place is part of the previous image.
I want the current image to take up the whole width of the banner. Is that possible?
Here's the Website Template
Here's what I think is the important part of the Slider:
CSS:
.wrapper ul {
padding-left:490px
}
.anythingSlider {
position:relative
}
.anythingSlider .wrapper {
width:1920px;
overflow:auto;
height:405px
}
/* Width below is max for Opera */
.anythingSlider .wrapper ul {
width:32700px;
list-style:none
}
.anythingSlider .wrapper ul li {
display:block;
float:left;
padding:0;
width:auto;
margin:0
}
JavaScript:
base.setCurrentPage = function(page, move) {
// Set visual
if (base.options.buildNavigation){
base.$nav.find('.cur').removeClass('cur');
captions.fadeIn(50);
$(base.$navLinks[page - 1]).addClass('cur');
};
// Only change left if move does not equal false
if (move !== false) base.$wrapper.scrollLeft(base.singleWidth * page);
// Update local variable
base.currentPage = page;
};
base.goForward = function(autoplay) {
if(autoplay !== true) autoplay = false;
base.gotoPage(base.currentPage + 1, autoplay);
captions.fadeOut(200);
};
base.goBack = function() {
base.gotoPage(base.currentPage - 1);
captions.fadeOut(200);
};
HTML:
<div id="slider-container">
<div id="slider-holder">
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li>
<img src="images/content/banner1.png" alt="" />
<p class="caption">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores</p>
</li>
<li>
<img src="images/content/banner2.gif" alt="" />
<p class="caption">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione</p>
</li>
<li>
<img src="images/content/banner3.gif" alt="" />
<p class="caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
</li>
</ul>
</div>
</div>
<div id="bevel"></div>
</div>
</div>
I guess your image is just too small, but also the slideshow wrapper has a 490px padding on the left. Try changing it to 100px and see what it does. It's in slider.css first style. #wrapper ul