For some dumb practices in which I am not allowed to use alert or any Js dialog box I have to make the following magic happen:
1.Make a div with a link, in this case its the one called info.
2.Made a invisible div, that would be my "PopUp" with some rubbish info inside.
3.When I click on the link info, the invisible div should materialize.
While simple and and even fairly obvious I am having a bit of trouble getting the logic of how to make such thing happen. If it helps me save face I just started programming..like 1 month ago and just HTML CSS, I am new to this whole Js universe.
This is my code as of now:
<div class="scroll-area" id="lista">
<div class="box">
<p>Item #1</p>
<p class="info"><a href="#" id="lnkInfo">Info</p>
</a>
<p class="info"><a href="#">Take</p>
</a>
</div>
<div class="box">
<p>Item #2</p>
<p class="info"><a href="#">Info</p>
</a>
<p class="info"><a href="#">Take</p>
</a>
</div>
</div>
Here comes the groans "PopUp"...
<div class="popUp">
<ul>
<li>BLA BLA</li>
<li>BLA BLA/li>
<li>BLA BLA</li>
<li>BLA!</li>
</ul>
</div>
CSS just in case.
.popUp {
position: absolute;
width: 300px;
height: 300px;
margin: 0 auto;
background-color: #ecf0f1;
top: 100px;
left: 100px;
display: none;
}
.show {
display: block;
}
And what I though would be a start to the JS:
var elementPopUp = document.getElementById('lnkInfo');
elementoPopUp.addEventListener('click', validate);
function validate() {
document.getElementById('popUp').className += ' show';
}
UPDATED you have syntax bugs in your html code fix and you are using getElementById to get element but you set popUp as class change it to id
<div class="scroll-area" id="lista">
<div class="box">
<p>Item #1</p>
<p class="info"><a href="#" id="lnkInfo">Info
</a></p>
<p class="info"><a href="#">Take
</a></p>
</div>
<div class="box">
<p>Item #2</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
</div>
<div id="popup" >
<ul>
<li>BLA BLA</li>
<li>BLA BLA</li>
<li>BLA BLA</li>
<li>BLA!</li>
</ul>
</div>
and css
#popup {
position: absolute;
width: 300px;
height: 300px;
margin: 0 auto;
background-color: #ecf0f1;
top: 100px;
left: 100px;
display: none;
}
#popup.show {
display: block;
}
and javascript
var elementPopUp = document.getElementById('lnkInfo');
elementPopUp.addEventListener('click', validate);
function validate() {
var d = document.getElementById("popup");
d.classList.add("show");
}
I believe if you do this:
<div class="scroll-area" id="lista">
<div class="box">
<p>Item #1</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
<div class="box">
<p>Item #2</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
</div>
And make the javascript this:
function validate(){
document.getElementById('popUp').style.visibility = 'visible';
}
That should work.
I have not tested it, so I may have a syntax or two wrong.
Here is an example of how to affect element style through JavaScript:
HTML
<a id="shower" href="">
show
</a>
<br>
<a id="hider" href="">
hide
</a>
<br>
<div id="popup" class="hide">Hello</div>
JS
document.getElementById("shower").addEventListener("click", function (e) {
var myDiv = document.getElementById("popup");
myDiv.className = "";
e.preventDefault();
});
document.getElementById("hider").addEventListener("click", function (e) {
var myDiv = document.getElementById("popup");
myDiv.className = "hide";
e.preventDefault();
});
CSS
.hide {
display: none;
}
Here is a simplified version of what I'd do:
The HTML:
clickMe
<div id="showMe">showMe</div>
The CSS:
display:none;
The JavaScript:
document.getElementById("clickMe").onclick = function() {
document.getElementById("showMe").style.display = "block";
}
Here is a fiddle to show the effect
Hope this helps ;)
Related
What I am trying to accomplish is basically, to get a list of Elements ( currently using document.querySelectorAll() in order to get a list of elements using a general selector.
E.g: get me all elements of .note class in the document.
document.querySelectorAll('.note')
since it collects them from all over the DOM, I then need a JS function to iterate over all of them using a different function from a library that does not use NodeList, and I need it to query all these elements individually (This is an automation task so negligent benefits of speed are of no matter here).
Since these elements appear on different parts and hierarchies of the DOM, I cannot fetch them all with a CSS selector individually like :nth-of-type, I need the specific CSS Selector/ XPath of each of them.
For example, for all .note class elements on a page, I need the result to be something like:
['.my-first-class .inner .note', 'section .different-class .inner .note', '.profile .profile-notes .note']
something in this style would be extremely helpful to me.
Thank you very much for any assistance you may provide!
I borrowed a generateQuerySelector function from this answer and simply looped over the results of .note query selection, being sure to convert the NodeList to an Array.
const notes = Array.from(document.querySelectorAll('.note'))
notes.forEach(note => {
console.log(generateQuerySelector(note))
})
function generateQuerySelector (el) {
if (el.tagName.toLowerCase() == "html")
return "HTML";
var str = el.tagName;
str += (el.id != "") ? "#" + el.id : "";
if (el.className) {
var classes = el.className.split(/\s/);
for (var i = 0; i < classes.length; i++) {
str += "." + classes[i]
}
}
return generateQuerySelector(el.parentNode) + " > " + str;
}
<div class="content">
<div class="primary">
<div class="article">
<div class="note">
</div>
</div>
</div>
<div class="secondary">
<div class="aside">
<div class="note">
</div>
</div>
</div>
<div class="note">
</div>
<div id="contact-form">
<div class="note"></div>
</div>
</div>
Css can't write it down, it can only show you whatever you want in the way you want
body *{ display: block} /* only if you want single column */
.wanted::after{ content: ' wanted '; float: right; background: red; color: #000; margin: 0 5px; padding: 0 5px}
p.wanted::after{ content: 'I am a <p>'; background: #cf8;}
div.wanted::after{ content: 'I am a <div>'; background: yellow}
a.wanted::after{ content: 'href me';background: orange}
<div>div</div>
link
<p>paragraph</p>
<a class="wanted">link</a>
link
<div>div</div>
<div class="wanted">div</div>
link
<a class="wanted">link</a>
<nav class="wanted">nav</nav>
<div class="wanted"> div </div>
<div>div</div>
<p>paragraph</p>
<div class="wanted"> div </div>
<p class="wanted">paragraph</p>
link
<div class="wanted"> div </div>
<a class="wanted">link</a>
<a class="wanted">link</a>
<div class="wanted"> div </div>
<p class="wanted">paragraph</p>
<div>div</div>
<div class="wanted"> div </div>
link
<div class="wanted"> div </div>
<p class="wanted">paragraph</p>
<div>div</div>
<a class="wanted">link</a>
<div class="wanted"> div </div>
<div>div</div>
<p>paragraph</p>
<div class="wanted"> div </div>
<div>div</div>
<p class="wanted">paragraph</p>
link
<a class="wanted">link</a>
<div>div</div>
I am working on a function that should get the text inside a span with class ".dida" of each post (Tumblr) and append them in a specific place (a div with id "#bottom-stripe") only when the image of the posts (img with class ".miniatura") are 50% in viewport.
I am using this external library to detect the elements on viewport:
https://github.com/moagrius/isOnScreen
This is my JS code:
<script>
$( window ).on('load scroll', function(e) {
$( "img.miniatura" ).each(function() {
if ( $( this ).isOnScreen(0.5, 0.5) ) {
var dida = $(".dida").each(function() {
$(this).html();
});
$( "#bottom-stripe" ).empty();
$( "#bottom-stripe" ).append( dida );
}
});
});
</script>
The script get all the captions together and append them all in the #bottom-stripe div. I want it to do this only when the img.miniatura are 50% in the viewport.
Any suggestions on where is the mistake?
Many thanks for your help!
It seems that you want to detect which image is currently in viewport.
$("img.miniatura").each(function() {
if ($(this).isOnScreen(0.5, 0.5)) {
var text = $(this).parents('div').find('.number').html();
//Detect which image is in viewport
$('#bottom-stripe').html(text);
}
});
I've add images text under number class, see the working example to detect the current view port image.
// https://github.com/moagrius/isOnScreen
!function(t){t.fn.isOnScreen=function(o,e){(null==o||"undefined"==typeof o)&&(o=1),(null==e||"undefined"==typeof e)&&(e=1);var i=t(window),r={top:i.scrollTop(),left:i.scrollLeft()};r.right=r.left+i.width(),r.bottom=r.top+i.height();var f=this.outerHeight(),n=this.outerWidth();if(!n||!f)return!1;var h=this.offset();h.right=h.left+n,h.bottom=h.top+f;var l=!(r.right<h.left||r.left>h.right||r.bottom<h.top||r.top>h.bottom);if(!l)return!1;var m={top:Math.min(1,(h.bottom-r.top)/f),bottom:Math.min(1,(r.bottom-h.top)/f),left:Math.min(1,(h.right-r.left)/n),right:Math.min(1,(r.right-h.left)/n)};return m.left*m.right>=o&&m.top*m.bottom>=e}}(jQuery);
// show only captions related to visible images
$(window).on('load scroll', function(e) {
$( "img.miniatura" ).each(function() {
if ($(this).isOnScreen(0.5, 0.5)) {
var text = $(this).parents('div').find('.number').html();
//Detect which image is in viewport
$('#bottom-stripe').html(text);
}
});
});
.info ul.tags {
display: none;
}
#bottom-stripe {
width: 100%;
height: auto;
position: fixed;
bottom: 0px;
left: 0px;
background-color: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<div class="post-content">
<div class="media">
<a href="#">
<img class="miniatura" src="https://placehold.it/350x300">
</a>
<div class="number">First Image</div>
<div class="info">
<ul class="tags">
<li>FirstWord</li>
<li>SecondWord</li>
<li>ThirdWord</li>
</ul>
</div>
</div>
</div>
</div>
<div class="post">
<div class="post-content">
<div class="media">
<a href="#">
<img class="miniatura" src="https://placehold.it/350x300">
</a>
<div class="number">Second Image</div>
<div class="info">
<ul class="tags">
<li>FirstWord</li>
<li>SecondWord</li>
<li>ThirdWord</li>
<li>FourthWord</li>
</ul>
</div>
</div>
</div>
</div>
<div class="post">
<div class="post-content">
<div class="media">
<a href="#">
<img class="miniatura" src="https://placehold.it/350x300">
</a>
<div class="number">Third Image</div>
<div class="info">
<ul class="tags">
<li>FirstWord</li>
<li>SecondWord</li>
<li>ThirdWord</li>
</ul>
</div>
</div>
</div>
</div>
<div id="bottom-stripe">test</div>
I need to add to this script to make the webpage open a tab on page load.
How can I do this?
I am thinking there is just a JavaScript command I am missing. I just for the life of my cant see it.
JavaScript:
$(document).ready(function(){
$('.tabs').each(function(){
var tab = $(this);
tab.find('.tab_content').hide(); // Hide all divs
tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
if($(this).hasClass('current_tab')) return false;
tab.find('ul.tab_nav li a').removeClass('current_tab');
$(this).addClass('current_tab'); //Set clicked link class to active
var currentTab = tab.find($(this).attr('href'));
tab.find('.tab_content').hide(); // Hide all divs
$(currentTab).slideDown(); // Show div with id equal to variable currentTab
return false;
});
});
});
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" media="screen" href= "D:\WP\css\style.css"/>
<script src="D:\WP\script\jquery1.9.1.js"></script>
<script src="D:\WP\script\easing.js"></script>
<script src="D:\WP\script\tabs.js"></script>
</head>
<body>
<!--Web page box-->
<div id="tab_style" class="box tabs">
<!--Header start-->
<div id="header">
<ul class="tab_nav">
<li>Home</li>
<li>About</li>
<li>Consulting</li>
<li>Social</li>
<li>Contact</li>
</ul>
</div>
<!--header end-->
<!--contents of site begin-->
<div class="content">
<div id="about" class="tab_content">
<br/>3
<br/>3
<br/>3
</div>
<div id="contact" class="tab_content"></div>
<div id="footer">
<p></p>
</div>
<!--footer ends-->
</div>
<!--contents end here-->
</div>
<!--Web page box end-->
</body>
This might not be the answer you were hoping for, but I just want to suggest that you start with something a little bit less convoluted than the code you posted.
Tabs can be easy: when a tab is clicked, just deactivate the current tab+panel and activate the new one.
Here is a quick demo I just threw together to show you:
HTML:
<div class="tabs">
<span class="tab" data-tab="thing1">Thing 1</span>
<span class="tab" data-tab="thing2">Thing 2</span>
<span class="tab" data-tab="thing3">Thing 3</span>
</div>
<div class="panels">
<div class="panel" data-tab="thing1">
<h2>Thing 1</h2>
<p>blah blah</p>
</div>
<div class="panel" data-tab="thing2">
<h2>Thing 2</h2>
<p>foo bar</p>
</div>
<div class="panel" data-tab="thing3">
<h2>Thing 3</h2>
<img src="http://slodive.com/wp-content/uploads/2014/03/funny-bab.jpg">
</div>
</div>
JavaScript:
// hook tab clicks:
$('body').on('click', '.tab', show);
// show first tab:
show('.tab');
function show(tab) {
// accepts an Event or a CSS selector:
tab = $(tab.target || tab).attr('data-tab');
// de-activate current tab:
$('[data-tab].active').declassify('active');
// activate new tab:
$('[data-tab="'+tab+'"]').classify('active');
}
CSS:
.tab {
display: block;
float: left;
padding: 5px 10px;
margin: 0 5px;
background: #FFF;
transform-origin: 0 100%;
transition: all 500ms ease;
cursor: pointer;
}
.tab:not(.active) {
opacity: 0.5;
transform: perspective(1000px) rotateX(30deg);
}
.panel {
background: #FFF;
padding: 20px;
}
.panel:not(.active) {
display: none;
}
JSFiddle Demo: http://jsfiddle.net/developit/42zcagjb/
Okay this is extra software for my little project, basically I have a huge div with little divs inside like this:
<div class="scroll-area" id="lista">
<div class="box" id="item1">
<p>Item #1</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
<div class="box" id="item2">
<p>Item #2</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box" id="item3">
<p>Item #3</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
<div class="box" id="item4">
<p>Lab #4</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
<div class="box" id="item5">
<p>Item #5</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
<div class="box" id="item6">
<p>Item #6</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
</div>
PopUp for item:
<div class="popUp hide" id="popUp">
<div class="stylePopUp">
<span>Info</span>
<span value="Close" id="btnClose">x</span>
</div>
<ul>
<li>Nome: Item #1</li> !-- Here is where I want to replace -->
<li>BLA</li>
<li>BLA</li>
<li>BLA</li>
</ul>
</div>
CSS
.box {
display: inline-block;
padding: 2px;
width: 75px;
border: 2px solid black;
margin: 3px;
}
.box:hover{
border:2px solid #e67e22;
}
Javascript:
var elementInfo = document.getElementById('lnkInfo'),
elementBtnClose = document.getElementById('btnClose');
elementoVerInfo.addEventListener('click', function () {
displayPopUp('popUpCorrect');
});
elementoBotonCerrar.addEventListener('click', function () {
hidePopUp('popUpCorrect');
});
function displayPopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('hide','');
fElementDivToShow.className = newClass + ' show';
}
function hidePopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('show','');
fElementDivToShow.className = newClass + ' hide';
}
But that is just to put a example of how it looks. Now when I click Info it displays a popUp with some (go figure) information in it which says:
Name: Item X
I don't want to make a div for each item, so I wanted to do some esque Java fix like:
String name = "Item:" + x. Where x is the name or number of item which the program should fetch automatically when I click on said div. The problem is that first I don't know the exact sintax for Javascript, nor the exact way of how I want that.
I was thinking in some sort of loop that compares the id of each div and when one is selected it assigns "Name:" X a value, but still my limited experience shouts that for that I would need some sort of i++, else how I am supposed to assign a int or string?
Sorry if I kinda lost the line of thought, English is not my main language and I am kinda frustrated, like when you have a word in the tip of your tongue >.< I have an idea of how to do it...
Any help would be appreciated
Best Wishes!
Here it is what you asked, This is in Jquery, I have attached a Fiddle check it
$('.box').click(function(e){
var divobj = $(this);
alert(divobj.attr('id'));
});
http://jsfiddle.net/AmarnathRShenoy/aJt2K/
You can mix jquery and JS , if you need this in a much efficient way.
I want the image to act as a toggle so when it's clicked on it will reveal the div with the text.
Here's the CSS class I'm using:
.hidden { display: none; }
.unhidden { display: block; }
and the JS:
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}//
Here's the HTML:
<div class="4u">
<!-- Box -->
<section class="box box-feature">
<a href="javascript:unhide('test');" class="image image-full"
<img src="images/pic01.jpg" alt="" /></a>
<div id="test" class="hidden">
<header>
<h2>Put something here</h2>
<span class="byline">Maybe here as well I think</span>
</header>
<p>Test and more text and more text and more text.</p>
</div>
</section>
</div>
You have a syntax error. Change line 4 to:
<a href="javascript:unhide('test');" class="image image-full">
Note the > at the end of the line.
Unless you're determined to use vanilla JavaScript, a much easier way would be to use jQuery. Add this to your <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
And then your a href could be just javascript:$('#test').toggle() and you wouldn't need to define any functions or CSS classes.