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 -->
Related
i want to move card 5 from 2nd column under card 1 of 1st columnwhen a specific breakpoint hit (probably on small screens).
i cant change the whole layout now, but this is required.!
<div class="container">
<div class="row no-gutters">
<div class="col-lg-6">
<!-- Card 1 -->
<!-- Card 2 -->
<!-- Card 3 -->
<!-- Card 4 -->
</div>
<div class="col-lg-6">
<!-- Card 5 -->
<!-- Card 6 -->
<!-- Card 7 -->
</div>
</div>
</div>
This layout is designed this way, i have nested columns and cards inside each column placed perfectly.
NOTE: (The Other Way Around) if some how i can manage to remove 2nd column totally on a specific break point, I can then arrange each card with flex-box order. If only i can remove second column totaly with css or javascript on that specific breakpoint!
Any help Would Be Appreciated! :)
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
So I have about 20 projects to show on my website and since I don't want to create 20 HTML files for each of them, I use this script to link people to the specific projects they click on. And so the link is like: http://mywebsite.com/projects.html?option="project1"
The problem I notice is that it usually displays the first project for about 1 second or longer before it shows the project I click on, I don't know what's the cause, I don't know if it's a glitch. Is there a way to fix it?
The script and my html:
$(document).ready(function() {
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();
}
<a href="projects.html?option=haivinh" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item">
<h3>Sleep infographic</h3>
<span class="category">Motion graphics</span>
<div class="imgwrapper">
<div class="imgcon">
<img src="images/thumb_item07.gif" />
</div>
<div id="view">view</div>
</div>
</div>
<!-- // .item -->
</div>
<!-- // .desktop-3 -->
</a>
HMTL of the project page:
<div class="container">
<div class="boxes" id="haivinh">
<div class="sidebar full-width">
<div class="desktop-6 tablet-12 columns">
<!--
.sidebar here is to used to apply the same CSS styles (padding, margin, font-size, and etc) applied to "left-sidebar" and "right-sidebar" templates
-->
<div class="box-info">
<h4 class="border-top">
Metro train ad</h3>
<p>The poster was made to promote the upcoming metro train system opening in Ho Chi Minh city in 2017. The idea is that our daily lives would be so much easier and more enjoyable going to work or school with Metro. </p>
</div>
<!-- // .box-info -->
</div>
<!-- // .desktop-6 -->
</div>
</div>
My guess would be that you default to showing project 1. You can tell this because your showDiv() function starts with a .hide(). As your function is not run until document.ready, you may see the initial setup for a short period before the function is run.
To fix this, make sure everything is hidden before running your js.
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);
});
});
I making page with tabs . And i ahve to make tabs inside tabs which Right now i am making it as button as I am not getting how to make it as tabs. Can anyone suggest me how to make it pls.
Below is my piece of code;
<div id="container">
<!-- Start Tabs !-->
<div class="tab-container">
<div id="c1">
Projects <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<button id="create">Create</button>
<button id="edit">Edit</button>
</div>
</div>
just make it with the help of css in short give it backgroud-color or backgroud-image, gradient on button and more and more you can also place div also at the place of button. As you want that's it .... its tutorials also present easily