I am implemeting a system where the user clicks on an image and is redirected to another website. Before redirecting a modal dialog appears and confirms that they will be redirected to another website.
The images are added dynamically from the back-end by the client and the client adds a unique service link to each image resulting in:
<!-- image #1 -->
<a href="#openModal"> <!-- opens the modal dialog -->
<div class="service">
<img src="img.png"> <!-- unique image -->
</div>
</a>
<!-- image #2 etc -->
<a href="#openModal"> <!-- opens the modal dialog -->
<div class="service">
<img src="img2.png"> <!-- unique image -->
</div>
</a>
<!-- clicking on image #1 -->
<div id="openModal">
<p>You will be now redirected to the service provider home page</p>
Order<!-- link entered in the back end of service that is unique with each service provider image -->
</div>
How could I achieve this without knowing a certain ID to each image?
Thanks O.
Can you please take a look at below fiddle link:
https://jsfiddle.net/pw8w1x6d/4/
HTML Code:
<a href="#openModal" class="openlink"> <!-- opens the modal dialog -->
<div class="service">
<img src="img.png"> <!-- unique image -->
</div>
Open Modal</a>
<!-- image #2 etc -->
<a href="#openModal" class="openlink"> <!-- opens the modal dialog -->
<div class="service">
<img src="img2.png"> <!-- unique image -->
</div>
Open Modal</a>
<div id="openModal" class="modalDialog">
<div> X
<div class="selectedImage"></div>
Submit
</div>
</div>
jQuery Code:
$(document).ready(function(){
$(document).on("click", ".openlink", function(){
var imagePath = $(this).find("img").attr("src");
$(".selectedImage").text(imagePath);
});
});
Related
I'm having a styling issue with my website. So I have 3 different sections for my navbar. First being for socials, second having my company logo, and third having web-page links.
As you can see from the first image, they're all supposed to be white and have the hover effect (this all works completely fine for the home page).
For the other three pages however I have a change of design and would like to make all my links in the navigation bar black, in doing so I have used the 'invert' feature in my css. However, when I try to change the filter for all images and links, they're split into "social-icon", "logo-white" for the company logo, and "nav-link" for the web page links. The issue I am having with it is for some reason when I click to the change the page, it only effects the 'invert' on the first image of each part (so the first social media icon, the company logo and the first web page link), as well as this, it completely takes the hover effect away from the images and links that have changed too. I've been messing around with 'foreach' statements but can't seem to get it to work at all.
//loads work page
function workPage() {
document.getElementById("landing-page").style.display = "none";
document.getElementById("work-page").style.display = "block";
document.getElementById("about-page").style.display = "none";
document.getElementById("contact-page").style.display = "none";
document.getElementById("social-icon").style.filter = "invert(100%)";
document.getElementById("logo-white").style.filter = "invert(100%)";
document.getElementById("nav-link").style.filter = "invert(100%)";
}
#social-icon {
filter: invert(0%);
transition: filter .3s;
}
#social-icon:hover {
filter: invert(50%);
}
<!-- navigation bar -->
<div class="nav-bar">
<!-- socials -->
<div class="socials-container">
<!-- instagram -->
<div class="social-icon-container">
<a href="#">
<img src="images/instaLogo.png" alt="Instagram Link" class="social-icon" id="social-icon">
</a>
</div>
<!-- tiktok -->
<div class="social-icon-container">
<a href="#">
<img src="images/tiktokLogo.png" alt="Tiktok Link" class="social-icon" id="social-icon">
</a>
</div>
<!-- youtube -->
<div class="social-icon-container">
<a href="#">
<img src="images/youtubeLogo.png" alt="YouTube Link" class="social-icon" id="social-icon">
</a>
</div>
</div>
<!-- company logo -->
<div class="company-logo-container">
<div class="logo-container">
<a href="home.html">
<img src="images/logo.png" alt="white company logo" id="logo-white">
</a>
</div>
</div>
<!-- page links -->
<div class="page-links-container">
Home
Work
About
Contact
</div>
</div>
Home page with normal filter and hover effect:
Work page with changed filter and broken hover effect:
im not a fan of inline css so try this:
let elements = document.querySelectorAll('.social-icon')
elements.forEach((el) =>{el.classList.add('filter')})
and add in css:
.social-icon.filter{invert(100%)}
or if you want to use inline styles:
document.querySelectorAll('.social-icon').forEach((el) =>{el.style.filter = "invert(100%)"})
I am trying to show/hide a div element. So it will list a hopspital, and then when it is clicked, it should display the following information using angularjs. If I delete 'ng-repeat="x in data" ng-if="x.collegeID == returnSchool()"' the dropdown effect will work, but obviously no data from my JSON object. If I delete 'class="drop-panel animated fadeIn"' then you don't need to click on the hospital name, all the information will be displayed for you (no dropdown effect). I can't quite figure out what I am doing wrong. I just want to be able to click on the hospital name, and then have the information associated with that hospital to display underneath it.
localHospital.html
<!-- resource start -->
<div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()">
<!-- resource header & icon -->
<div class="list-item question"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div>
<!-- resource data -->
<div class="drop-panel animated fadeIn">
<!-- phone number -->
<p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p>
<p class="resource-content">{{x.hospitalPhoneNumber}}</p>
<!-- location -->
<p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p>
<p class="resource-content">{{x.hospitalAddress}}</p>
<!-- directions -->
<p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p>
<p class="resource-content">{{x.hospitalDirections}}</p>
</div>
</div>
<!-- resource end -->
style.css
.drop-panel {
display: none;
}
.drop-panel.show {
display: block !important;
}
Try changing ng-if to ng-show. ng-if will add the element to the DOM only when the user clicks on it, which means it could be screwing up the style's show/hide behavior.
I ended up solving it by using the ng-show command, but I didn't just switch the ng-if with ng-show. I ended up getting rid of the drop-panel css class in the div, and adding 'ng-click="showDetails = ! showDetails"' and then and 'ng-show="showDetails"', which would toggle on and off as the div was clicked.
It was from this Show hidden div on ng-click within ng-repeat
localHospitals.html
<!-- resource start -->
<div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()">
<!-- resource header & icon -->
<div class="list-item question" ng-click="showDetails = ! showDetails"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div>
<!-- resource data -->
<div class="animated fadeIn" ng-show="showDetails">
<!-- phone number -->
<p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p>
<p class="resource-content">{{x.hospitalPhoneNumber}}</p>
<!-- location -->
<p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p>
<p class="resource-content">{{x.hospitalAddress}}</p>
<!-- directions -->
<p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p>
<p class="resource-content">{{x.hospitalDirections}}</p>
</div>
</div>
<!-- resource end -->
kind of nested modal box for external links issue ,I had used the following code successfully to load external page in modal box but I cannot load external links inside that modal to open them as modal box the same way because I want it to be opened by default if the user opened it out of modal box
<div id="Site" class="modal fade page-load" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" style="text-align: center">
<div data-role="page">
<div class="Popup">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$("#Site .Popup").load("Site.html");
</script>
I am trying to show an video by using click event, but the click event doesn't trigger.
Here is the code:
<div id="video-section">
<div class="radial-progress">
<div class="r-circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
</div>
<div class="inset">
<i class="fa fa-caret-right"></i>
</div>
</div>
<iframe src="//player.vimeo.com/video/92371445"></iframe>
</div> <!-- end video-section -->
And this is my jquery codes
$('#video-section .radial-progress').on('click', function() {
$('#video-section > iframe').show();
});
You can see my live example here, it doesn't works for showing video.
Updated: I fixed myself. What happened is when I put the code in the last js file, there is another js get errors so it can't load this code. I also added a little code to make it play when play button is clicked.
I'd like to add an 'Are you sure?' confirm dialog to links on a jQuery mobile page.
Here's my code - it's straight outta the jQuery docs, all apart from the links with the confirm dialogs on them.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called bar</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
Back<h1 id="route-header">Bar</h1><a href="#foo" onclick="return confirm('Leave page?');" class="ui-btn-right" data-icon='home'>Home</a>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>Back to foo</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
Currently the confirm dialogs have no effect :(
Anyone know how I can add these with jQuery mobile?
Thanks!
It's nicer if you give IDs or classes to your buttons and bind events to them in your jQuery ready function, or wherever you dynamically create your forms (if you do).
Assuming you give the following id attribute to the back and home buttons and remove the inline onclick attribute, add this to a script tag:
$(function(){
$('#btnBack').click(function(){
if(!confirm("Leave page?")) return false;
history.back();
});
$('#btnFoo').click(function(event){
return confirm("Leave page?");
});
});
When the back button is clicked, it only returns false if the user cancelled the operation. If they clicked ok, you DO want to execute history.back() to go back to the previous page.
On the foo link, you have to return false to avoid automatically following the hyperlink.
Also note that the confirm function is synchronous, unlike most user interactions that you do in javascript through the DOM. This means when the dialog pops up, your code execution is on hold until the user presses a button, and the function evaluates to the result of that click. This is in fact what you need in this situation.
Edit: Removed preventDefault() on #bazmegakapa's suggestion.
I was facing the same problem and just solved it now.
I hope my example can help you and others having the similer problem.
Delete
function delComment(commentSno) {
...
// save
var nextUrl = "/deleteComment.do";
$("#frm").attr("action", nextUrl);
showConfirm("Are you sure to delete?", function() {
$("#frm").submit();
}
);
}
<div data-role="dialog" id="confirmbox">
<div data-role="header" data-icon="false">
<h1>Confirmation</h1>
</div><!-- /header -->
<div data-role="content">
<h3 id="confirmMsg">Confirmation Message</h3>
<br><p>
<center>
Yes
No
</center>
</div>
function showConfirm(msg, callback) {
$("#confirmMsg").text(msg);
$("#confirmbox .btnConfirmYes").on("click.confirmbox", function() {
$("#confirmbox").dialog("close");
callback();
});
$("#confirmbox .btnConfirmNo").off("click.confirmbox", function(r) {
});
$.mobile.changePage("#confirmbox");
}