How to create a modal that opens when a function is called? - javascript

I'm having issues attempting to create a modal that opens when a certain area of an image map is clicked.
Below is the code from my HTML file:
<head link rel="stylesheet" href="ryanspagecss.css"></head>
<body>
<div class="main">
<script src="lotrpage.js"></script>
<map name="lotrmap">
<area shape="poly" href="" coords="405, 50, 463, 80, 461, 141, 408, 173, 354, 144, 353,81" onclick="playerSelect()">
</map>
<div id="selectModal" class="selectModal">
<p>This is some text in the modal...</p>
</div>
Below is my CSS:
#selectModal {
width: 500px;
overflow: hidden;
background: pink;
box-shadow: 0 0 10px black;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
padding: 10px;
text-align: center;
display: none;
}
Below is my JavaScript:
function playerSelect(){
//Show Modal
let selectModal = document.getElementById('selectModal');
selectModal.style.display = "block";
}
I understand that in order to change my Div from invisible to visible I need to change the display value to block from none - Which is what I've attempted to do with my JavaScript function.
When I select my image it does nothing. - What am I missing here?

When using document.getElementById('selectModal'), the function will try to find an element in your html whose id equals selectModal. In this case, your modal has the id selectOwner.
You should try to change your code to document.getElementById('selectOwner')
If you want your function to find the modal using the class name, you would have to use document.getElementsByClassName('selectModal'). Just consider that this will return something like an array of divs that contain this class (it's actually a HTMLCollection, not an array)

You have no element with ID selectModal. Try adding id="selectModal" to your div.

After realising a commenter's code and some minimal code of mine worked in JSFiddle - tested to see if my CSS would change the colour of some random text.... it didn't.
It turned out that I had my CSS linked incorrectly. No syntax errors were returned so hadn't spotted it.
Instead of
<head link rel="stylesheet" href="ryanspagecss.css"></head>
It should have been
<head> <link rel="stylesheet" href="ryanspagecss.css"> </head>

yes you are correct on understanding the difference between display: "none" and display: "block"
I tried to run your code in my local which doesn't display anything in screen.
There are two possible solutions here
Please try and use this map & area tags with an image that help you display something in html which lets you click. (link)
You can try to add a simple tag that displays some text in your html with same on click function. Paste this below code in your html and when you click, it should let you open the modal.
<div onclick="playerSelect()">
<p>
Hi, Please click me to see the modal
</p>
</div>

Related

Entire div clickable with CSS

I'm using dropzone.js for Ajax uploading of images. The problem is that I have the following div containers
<div id="images-container" class="ui-sortable dz-clickable">
<div id="file-image">
<p><b>Add images</b></p>
<small>Click or drag&drop here</small>
</div>
</div>
And dropzone.js is initialised as follows:
$("#file-image").dropzone();
My css is looking like this:
#file-image {
border: 1px solid rgb(187, 187, 187);
background: rgb(247, 247, 247);
box-sizing: border-box;
float: left;
display: block;
position: relative;
z-index: 20;
cursor:pointer;
}
The problem is that when I click on the text (Add images or Click or drag & drop.) the plugin cannot be activated. How can I make the entire #file-image div clickable?
I've changed your div to a form and added an action and it seems to be working fine.
HTML
<div id="images-container" class="ui-sortable dz-clickable">
<form action="/action" id="file-image" class="dropzone">
<p><b>Add images</b></p>
</form>
</div>
This an extract from the official website - "Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute."
So I think you need to use the action attribute to get it to work.
Codepen - https://codepen.io/anon/pen/aGKBgY

Force hover state secondary element on click

quick question from a complete JS noobie.
On a site, I have an image of a product consisting of basically two parts, then I have a row of small .png thumbnails .colorthumbnail of those separate parts with transparent backgrounds. In the CSS I set it so that when hovering the thumbnails, it enables the .colorzoom class that overlays a big version of the same color option over the original product picture using position: absolute.
HTML:
<div class="coloroptions">
<div class="j210desertsand">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210desertsand.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210desertsand.png">
</span></div></div>
<div class="j210platinum">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210platinum.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210platinum.png">
</span></div></div>
</div>
The <div class="j210desertsand">classes are simply there so I can easily hide a single color option using CSS and the next colour will line up. The anchor points are there cause after some research I found I should actually make the thumbnails clickable and with a href="javascript:void(0)" they don't actually link anywhere or reload the page.
CSS: (Excuse the mess, I'm inexperienced)
.coloroptions {
width: 60%;
margin-left: 40%;
}
.colorthumbnail {
margin-left: -45%;
}
.colorthumbnail img {
float: left;
max-width: 16%;
padding-right: 5px;
position: relative;
}
.colorthumbnail .colorzoom {
position: absolute;
width: 253%;
margin-top: 6.9%;
display: none;
margin-left: -3.6%;
}
.colorthumbnail:hover .colorzoom {
display: block;
}
Now this appears to work fine, but because there are two different parts I want to give the user the ability to combine color options and obviously you can't hover over two images at once. After some more research I found that I need Javascript to force the :hover state on click. But I'm gonna be honest, I have no idea what I'm doing. This is what I have:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!-- -----------------------JSQuery------------------------- -->
<script>
$("#colorpicker").click(function() {
$('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom');
});
</script>
<!------------------------ JSQuery End -------------------------->
However this does not appear to be working. Did I get the linked script in the <head> right? It did work alright with the 'Hello World' pop-up test. Did I get the classes in the script right? I'm a little stuck and help would be appreciated! Much love for the community.
Try adding your code like this:
$( document ).ready(function() {
$("#colorpicker").click(function() {
$('.colorthumbnail:hover')
.toggleClass('colorthumbnail:hover.colorzoom');
});
});
When trying to use jquery you need to make sure the page is loaded so it can perform dom manipulation.
source: https://api.jquery.com/ready/
Here is a jsFiddle demo: https://jsfiddle.net/Lv571n1w/
If you inspect element you can see it toggle the classes when clicked.

onclick behaves oddly - refreshes page instead of displaying content

Here is my code, shortened for ease of access;
HTML
<a onclick="showHideDiv('bio')" target='_self'>
bio
<div id="bio" class="shadowScreen" style="display: none;">
<p class="showBio">
Bio!
</p>
</div>
</a>
Javascript:
var curDiv;
function showHideDiv(id){
if (curDiv!==null){
document.getElementById(curDiv).style.display="none";
}
document.getElementById(id).style.display="inline";
curDiv=id;
}
CSS:
.shadowScreen{
-moz-box-shadow: 0 0 30px 5px;
-webkit-box-shadow: 0 0 30px 5px;
}
.showBio{
background-color: white;
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
When the 'a' element is clicked "showDiv(div)" is supposed to send a function call to JS which alters "display:none;" to "display:inline;". The HTML will now have the 'div' element which has the class "shadowScreen" which darkens the entire screen. I then have a 'p' element which centers a box on the screen and displays "bio!". But, it's not doing that, and I can't figure out why naht. I'm not the greatest with the Netbeans debugger, so I can't tell exactly what it's saying ;-;
If you need further clarification, just ask! I'll be more than happy to help you help me.
You should remove target and add "#" to href param as suggested.
Bio
Regarding your javascript code, try to initialise your curDiv variable with null.
var curDiv = null;
I think its redirecting because of the a tag.
You should replace:
<a onclick="showHideDiv('bio')" target='_self'>
with
<a href="javascript:void(0);" onclick="showHideDiv('bio')" target='_self'>
Firstly, you'll need to give your anchor tag a href attribute to make it valid. I'd suggest using the ID of the div you're toggling - #bio - or simply just #.
Next, you need to prevent the default action of your anchor tag in order to stop it executing the link you used in the href attribute. To do so, you need to add the following line to the end of your JavaScript function:
return false;

Issue in displaying div using Colorbox

Good Day Professionals,
I'm using Colorbox plugin to display a certain div, but this issue appears.
the structure is as follow:
1- Hidden div to be displayed
2- Show btn to display the div
When I click the btn for the first time the div is displayed without any problems, but when I press ESC btn to close it and return the previous step again and click the btn the colorbox opens but without showing the div
This is the HTML code
<div class="to_be_show">
<!-- html structure is here -->
</div>
<p class="display">display</p>
This is the css style
.to_be_show{ width: 500px; height: 200px; background: red; display: none; }
This is the JS code
$('.display').click(function(){ $('.to_be_show').css('display','block'); });
$('.display').colorbox({opacity: 0.98,inline:true});
$(document).bind('cbox_closed', function() {$('.to_be_show').css('display','none'); });
So, What is the problem with my code ?!
-------- Update ----------
I know The problem but I don't know how to solve it !!!
I want to set the href attr of the display with Jquery as the content is loaded dynamically
and i use this and didn't work !!!
$('.show_album').colorbox({href:$(this).prev()});
Why ??!!
You can achieve this by creating inline color box
HTML Mark up
<div style="display:none">
<div class="to_be_show" id="to_be_show">
Element to be show
</div>
</div>
Display
css
.to_be_show {
width: 500px;
height: 200px;
background: red;
}
Js
$(document).ready(function () {
$(".inline").colorbox({
inline: true,
opacity: 0.98,
});
});
Here is working fiddle.
Don't forget to include
colorbox css & js
cheers!!!

jQuery with Wordpress Loop. Show / Hide content?

At the moment I have a website that grabs the 12 most recent posts from a category, and displays them as a link to their permalink, with the post thumbnail image as the link image.
You can see a working example here: http://mathewhood.com/sitefiles/
What I want to do, is somehow add functionality into my loop that will allow me to make it so that when you click on one of these list elements, it will display the_content(); for each element.
I found this - http://gsgd.co.uk/sandbox/jquery/easing/ Which I think may provide the functionality that I want (ideally jswing in and out), but I am struggling at implementing it! If anyone knows how I could make this happen please answer this and receive your well deserved up-votes!
http://jsfiddle.net/XzJgU/ - Here is my current loop so far, any help will be greatly appreciated!!!!!!!!!
Here is my solution to your problem. I'm giving an example on how to implement jquery Easing.
EDIT
revised my post, please
View revised sample here
Hope it helps.
$('.thumbs').click(function(e){
e.preventDefault();
var contents = $(this).closest('.recentPost').find('.caption').html();
var $container = $('#theContainer').html(contents);
$container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:100}, {duration: 1000, easing: 'easeInOutCirc'});
$container.click(function(){
$container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
$container.fadeOut('slow');
$container.html('');
});
});
Something like that should work - http://jsfiddle.net/XzJgU/5/. It renders the content for each post in the loop, hidden by default using CSS. When a post is clicked, it moves its content to #displayed-post, making it visible. When another post is clicked, its moves back to its original container and the new post content is moved there.
I'm not entirely clear on how you want this to work - are you looking for a PHP solution or a JavaScript one or perhaps a mix of the two. I've got two suggestions on how you might make it work. Also, note that the jQuery library you're referring only adds easing options to jQuery - i.e. it only deals with animation and not with the business logic and behaviour of your code.
Using ajax
This should work in this case since you're not making cross-domain requests. Essentially, you'd intercept the click to the link, figure out where it's pointing and then make a GET request to that page. You'd then filter out the appropriate HTML from the response and put it into your page. Something like this:
$('.recentPost a').click(function(){
$.get($(this).attr('href'), function(data){
//make a get request to the page the link linked to
//and extract the blog content div
$("placeholder").html($(data).filter(".blogRight"));
});
return false; //cancel the browser's default action on click to keep user on page
});
where you'd have a <div id="placeholder" /> in your HTML page where you'd like the content to appear.
Using PHP + JavaScript
Instead of fetching the content on demand, you'd generate it when the page loads but keep it hidden. You'd again intercept clicks but this time you'd find and display the appropriate, existing div on the page.
So your generated page would look something like this:
<div id="contentWrap">
<div class="hidden-featured-content" id="content-f12">
<div>Your content here</div>
</div>
<div class="hidden-featured-content" id="content-f11">
<div>Your content here</div>
</div>
<div id="newBanner"></div>
<div class="recentPost">
<img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" />
<a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
<div class="captionTitle">Hello World 12!</div>
<p></p>
</div></a>
</div>
<div class="recentPost">
<img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" />
<a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
<div class="captionTitle">Hello World 11!</div>
<p></p>
</div></a>
</div>
...
You could then use something like to toggle the appropriate content
$('.recentPost a').click(function(){
if($(this).attr('id')){
var x = /link-(.*)/.exec($(this).attr('id')); //figure out which content- div to display
$('.displayed').hide().removeClass('displayed'); //hide already displayed content
$('#content-' + x[1]).show().addClass('displayed'); //show content and mark it as displayed
return false;
}
});
There are a number of ways to achieve this. The most efficient would probably be a full ajax solution but that would require a Wordpress plugin and some advanced scripting.
The most straightforward solution would be to add a box for dynamic content, output the content for each post in a hidden DIV under it's permalink/image, then use javascript to move content from the hidden DIVs to the dynamic content box when a permalink is clicked. I've worked up some code at http://jsfiddle.net/HF9Pr/.
Try this:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
width: 203px;
margin: 0px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
background: #c1e0fb;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
}
div.panel
{
height: 288px;
display: none;
border-top: 1px dashed #aaa;
}
p.flip
{
border-top: 1px dashed #aaa;
border-bottom: 1px dashed #aaa;
}
</style>
</head>
<body>
<div class="panel">
<b>sclughslru</b>
<br><br>
ertljhvij3p
<br><br>
<b>veuywihtp</b>
<br><br>
ghdjhrntnd
<br><br>
<b>ehv3rtv</b>
<br><br>
vt4k4kb76kb5
<br><br>
<b>edb3jrr3n54</b>
<br><br>
skcehgkheone
</div>
<p class="flip"><img src="https://dl-web.dropbox.com/get/Pictures/Other/up-down.jpg?w=f17ee285" style="width: 12px; height: 10px; margin-right: 10px;" />Information</p>
</body>

Categories

Resources