I'm not very experience with JavaScript and jQuery and I'm really needing help to think something through. I'm trying to display information to the user in a similar way to the Metro UI interface in Windows 8.
In essence I've got a page fulled with tiles of different sizes (just like Metro/Modern UI) and a tiny bit of information on each tile such as the date of a post. I'd like to be able to click the tile and for a text popup to appear with the information relevant to the tile that was clicked on.
I figure this would be an easy task if the content was static, but since I'm building the tiles based on a Facebook RSS feed, I'm having quite a bit of difficulty even figuring out how I would store and display the main text of the tile. To get my point across I've done an extremely simple sample of a box, and what I'd like.
<html>
<body>
<div class="large-box">
<p>Date</p>
<p>Basic synopsis</p>
<div class="body-text">
<p>This is the body text that I want hidden to start with, but visible in the pop-up.</p>
</div>
</div>
</body>
</html>
Now, I don't have a problem with creating tiles and populating them with the date and any other information, but I have no clue how to make the text inside the body-text div not visible inside the tile, but only when clicked and seen in a pop-up.
Honestly I don't even know if I should be storing the text inside the tile like that at all, but it's the only way I can think of organizing my data. If you may remember, I'll have up to 25 of these tiles going down the screen and I need to be able to access each one. As well, the reason I'm thinking like this in the first place is because I previously used jQuery UI Accordion which had the text it displayed hidden, then shown when clicked.
At this point, even if you can't help me with any working code samples or snippets and help or push in the right direction would be really appreciated.
If you're receiving dynamic content from some known location then you're not going to be able to write this statically.
This will require some fancy footwork on your end with JavaScript, since there is some much not known with what you've got going on I can offer you some start up code.
I will highly recommend that you create these tiles dynamically.
//load the string content from where ever you're querying it from
var tile = getTileContent();
var lb = document.body.querySelector('large-box'),
bt = document.createElement('div'),
showContent = function () {
//toggel
if (bt.isOpen) {
this.innerHTML = '';
bt.isOpen = false;
}else {
this.innerHTML = '<p>' + this.content + '</p>';
bt.isOpen = true;
};
};
bt.className = 'body-text';
bt.onclick = showContent;
bt.content = tile;
bt.isOpen = false;
lb.appendChild(bt);
What you need is a javascript framework with modal popup component, for example the bootstrap modal dialogs:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Title of the post in a tile
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Post title</h4>
</div>
<div class="modal-body">
...Post content...
</div>
</div>
</div>
</div>
Related
I have an asp.net web forms website that I am trying to enhance by adding popup modals that show the rental rates for equipment available to rent. On most pages, the rates are 'static' and are posted at the top of the page for all the equipment on that page. However on a few pages, the rates cannot be ‘static’ at the top because each piece of equipment has different rates, thus the need for the popup.
I have created a user control (I'll call 'Rate Card') that does the database lookups and rate calculations for the equipmentID passed to it, and it then creates a formatted DIV (complete with stylings, disclaimers, and links to the Terms and Conditions). For the 'static' pages, I simply insert this DIV in my document’s asp:placeholder and I'm done. For the other pages, I would like to keep using my Rate Card user control as the contents of the popup.
Here is what I have tried:
asp:buttons using the 'onClick' to initiate server side code to generate the Rate Card. It is then inserted into a block of bootstrap modal code in the document, and finally the server side calls some javascript code (via ClientScript.RegisterStartupScript) that displays the modal popup. This works, however the webpage reloads each time you click on the View Rates button, and scrolls back to the top. If I try to check for 'isPostBack' and just return if it is, the page still reloads and all I have is the header and footer from my site master.
I started coding to put the bootstrap modal block inside an asp:UpdatePanel, but after reading several different posts, it seems the page would still reload.
So what I am wanting to accomplish is to have the user click an element beside the name of a piece of equipment (button, link, label, div, etc.) and have the something trigger the Rate Card to be generated, and then display as a modal popup.
My programming background is C# mainly for WinForms client applications, but have some experience with asp.net websites. So, I may need some extra guidance and examples.
Thanks in advance for any assistance!
ADDED CODE:
Button source:
<asp:Button ID="ShowRates" runat="server" OnClick="ShowRates_Click" CommandArgument="0" Text="View Rates" ></asp:Button>
Button code behind:
protected void ShowRates_Click(object sender, EventArgs e)
{
var ID = ((Button)sender).CommandArgument;
if (int.TryParse(ID, out int assetID) == false) return;
assetCard_ShowRate(sender, e, assetID);
}
private void assetCard_ShowRate(object sender, EventArgs e, int assetID)
{
Controllers.AssetController ctlr = new Controllers.AssetController();
var rates = ctlr.GetAssetRateCardsByAssetID(assetID);
UserControls.RatesTable2 ratesTable = (UserControls.RatesTable2)LoadControl("~/UserControls/RatesTable2.ascx");
ratesTable.BuildRateCard(rates, "");
//Add the rate card control to the placeholder
phRateCard.Controls.Add(ratesTable);
//Call the javascrip function to show the popup
Page.ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);
}
Page code behind: Bootstrap popup class block:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<asp:PlaceHolder ID="phRateCard" runat="server">
<%--Place Rate Card Here--%>
</asp:PlaceHolder>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
function ShowPopup() {
$("#myModal").modal("show");
}
</script>
It seems that the page reload is occurring right after the javascript is called, and before the javascript starts to run.
This is how I was able to accomplish what I needed using the following code:
Button source:
<button id="ShowRates2" runat="server" type="button" class="btn btn-link treUnderline" style="color:black" onclick="ShowRates_Click(this)">View Rates</button>
Button code behind:
[System.Web.Services.WebMethod]
public static string ShowRates(string AssetID)
{
int assetID = int.Parse(AssetID);
ListLayoutByCategory5 method = new ListLayoutByCategory5();
string html = method.BuildRateCard(assetID);
return html;
}
private string BuildRateCard(int assetID)
{
Controllers.AssetController ctlr = new Controllers.AssetController();
var rates = ctlr.GetAssetRateCardsByAssetID(assetID);
UserControl uc = new UserControl();
UserControls.RatesTable2 ratesTable = (UserControls.RatesTable2)uc.LoadControl("~/UserControls/RatesTable2.ascx");
ratesTable.BuildRateCard(rates, "", false);
//Get the HTML code of the ratesTable control (uses RenderControl(HtmlTextWriter(StringWriter(StringBuilder))) )
string html = ratesTable.HTML;
return html;
}
Page source:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div id="popupBody" class="modal-body">
<asp:PlaceHolder ID="phRateCard" runat="server"></asp:PlaceHolder>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Javascript:
function ShowRates_Click(asset) {
var selectedAssetID = asset.getAttribute("assetid");
PageMethods.ShowRates(selectedAssetID, ShowRatesPopup);
}
function ShowRatesPopup(popupHTML) {
document.getElementById('popupBody').innerHTML = popupHTML;
$("#myModal").modal("show");
}
</script>
This is basically what I had to do. On the button’s ‘onclick’ event, I called the JavaScript function ‘ShowRates(this)’. This function extracted the assetid from the attributes, and then called the server-side method ‘ShowRates’ passing the assetid to it. This method created the rate card user control and return a string containing the raw html code of that user control. (This used C#’s control.RenderControl method to get the html.)
Once the JavaScript function received the html code from the server, it then called JavaScript function ‘ShowRatesPopup’ and passed the html code to it. This function inserted the html code into the ‘popupBody’ and then called the modal popup ‘#myModal’.
I am in the process of learning jQuery and JS, so I apologize if this is a stupid, easy question.
I am working with a tour plugin called intro.js that adds hints to a web page (bootstrap page). I got the intro.js hints working, however I need to be able to show and hide all of the hints by toggling one button. The way the plugin currently works, you show the hints by clicking a button, then you have to manually click on each hint icon to view the tooltip, then click a button on the tooltip to hide the hint icon. The web pages could have several hints displayed (anywhere from 10-15) and users may not want to see what all hints are, as they may want to just see what 1 or 2 are then close all the hints - so I want to be able to toggle all of them on/off with one button.
According to the plugin API (view it here: https://introjs.com/docs/hints/api/), the hints are added when the button is clicked using this function: introJs.addHints(). You are supposed to be able to hide all of the hints using this function: introJs.hideHints().
So, how can I toggle both of these functions with one button?
Also, another issue I am having is if a user does not close all of the hint icons and they open a new page, the hint icons are still visible. If I refresh the page, they disappear. Related to this, if someone opens the hints and closes them, but decides to reopen the hints again, they do not open unless the page is refreshed. The API documentation has a function called: introJs.refresh() that says it refreshes and rearranges the hints. I think this is what I need to clear the existing hints (but I could be wrong). How can I clear/refresh the hints when the hints are closed so users can reopen the hints if needed, without refreshing - and so the hints disappear if a new page is opened and some hints were not closed.
Please help me with these questions and make a newbie's Christmas/holiday even better!!!
Here is a jsfiddle with hints added to a bootstrap modal. The Show Hints link is what I need to toggle on/off: http://jsfiddle.net/beaver71/fc0rkakn/
Thank you to everyone reading - and Happy Holidays to all of you.
Sample HTML:
<!-- Button trigger modal -->
Open Notes Modal
<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Notes</h4>
</div>
<div class="modal-body">
<div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
<input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
</div>
</div>
<div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="middle-right" style="margin-left:15px;">0/300
</div>
<div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i> Show Hints</a></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The API allows introJs to be commanded and for callbacks to be attached to various internal events, however it doesn't provide for inspection of state (in particular whether or not a hint is currently showing).
To achieve the toggle function, you will need to manage a state variable of your own.
Something like this ...
jQuery(function($) {
var hintShowing = false; // a variable by which to track the state of introJs.
introJs("#targetElment");
$("#myToggleButton").on('click', function() {
if(hintShowing) {
introJs.hideHints();
hintShowing = false;
} else {
introJs.showHints();
hintShowing = true;
}
});
function setShowing() {
hintShowing = true;
}
function resetShowing() {
hintShowing = false;
}
introJs.onchange(setShowing).oncomplete(resetShowing).onexit(resetShowing);
// add hints and set options here
});
That should work, at least to a certain extent. It depends on whether onchange fires when the initial hint is shown. If not, setShowing() will also need to be called manually (from your own code when the hint sequence starts) or maybe just initialise var hintShowing = true;
I know this has been asked and answered, but I'm not having any luck with any of the options that I've found. I'm trying to have the video stop playback or pause the video when the modal closes. One problem I'm having is the ability to target the close button. I've put console.logs in the functions I've tried and they weren't registering in the console at all. Thanks for any insights able to be offered.
<div id="myModal<%= index + 1 %>" data-id='<%= list.video_id %>'class="modal fade videoModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content bmd-modalContent" >
<div class="modal-body modal-header">
<div class="close-button">
<button id='single' type="button" class="close fancybox-close" data-dismiss="modal" aria-label='Close' ><span aria-hidden="true">×</span></button>
</div>
<div class='embed-responsive embed-responsive-16by9'>
<iframe id='player' class='embed-responsive-item' src="https://youtube.com/embed/<%= list.video_id %>?rel=0&enablejsapi=1" allowFullScreen='true' frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
EDIT:
Sorry, I'had tried so much jQuery that I didn't have any in my app.js folder at the time. Here is what I'm working with now.
$('[id^=myModal]').on('hidden.bs.modal', function(event) {
console.log(player);
event.target.stopVideo();
});
Update the question with more details
Its really hard to tell what is the problem because you only posted html. You having problem with locating close button and your console.log doesnt trigger. Obviously your javascripe file has some errors above your console.log line.
To detect if modal is closed you can use this EVENT
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
I would not change id of modals when generating them, instead I would put data-attr on this element to have one .on('hidden.bs.modal') and to have control over every modal
UPDATE:
from youtube-api docs https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
It has been said that if you embed in your html iframe with the youtube video then in the moment u make something like this in js:
function onYouTubeIframeAPIReady(){
var iframe = document.getElementById("my-video");
video = new YT.Player(iframe);
}
you dont have to define attributes of Player that you create, it will take it from the iframe.
fiddle: http://jsfiddle.net/ux86c7t3/2/
Well, you can simply remove the src of the iframe and then put back again like; so the iframe stops running.
<iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf ?>" w></iframe>
<span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton" data-dismiss="modal"></span>
now the Jquery part
function stopVideo(id){
var src = $j('iframe.'+id).attr('src');
$j('iframe.'+id).attr('src','');
$j('iframe.'+id).attr('src',src);
}
I have a modal in my application which currently opens using bootsrap:
<div class="modal full-page fade" tabindex="-1" role="dialog" id="fullpageModal">
<div class="full-page-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<iframe src="http://www.example.com/id/1"></iframe>
In my HTML I have a button attached to a function:
<button (click)="initPlay(2)" data-toggle="modal" data-target="#fullpageModal" >PLAY</button>
At present bootstrap opens the modal and Angular handles the click.
What needs to happen is this:
User clicks on button
The iFrame URL src is updated according to the button clicked
The modal is made visible.
What I think I need to do is this:
Remove the opening of the modal from bootstrap and hand this to Angular2
On button click the function updates the iframe src
The function then opens the modal (or hands this back to Bootstrap?)
My questions:
What is the best method to update the iframe src? Maybe to include a variable: {{iframeSrc}} and to update this after click?
What is the best way to handle modal opening?
Thank you!
Well this turned out to be really simple.
I created two functions:
initPlay(id) {
this.iframeSrc = "http://example.com/game/" + id;
}
clearPlay() {
this.iframeSrc = "";
}
I left bootstrap to manage the modal open and close and simply used the Angular2 (click) method to initiate the src change.
I added a "loading" class to the iframe to show that action is taking place.
Thats it.
I have 3 different types of modal windows to handle different events. They popup to handle either:
1) Warnings, i.e. "hey, if you leave the page you will lose your work" kind of messages.
2) Dynamic data from a form the user previously filled out, i.e. "you are about to create a page with DataX: Data X, DataY: DataY, Date: March 28, 2012.
3) Form for the user to fill out.
I was originally trying to handle all 3 of the above scenarios with one set of html/css/javascript, just passing in data and modifying divs depending on situation. As I have expanded things, i'm noticing things being harder to maintain cleanly without being sloppy about it. I have a few questions which i'll list after I walk through how things are now.
Simplified HTML for modal popups:
<div id ="popup" style="display:none;">
<div class="modal-container">
<div class="modal">
<div class="modal-header">
<a class="close" href="# " title="Press Esc to close"><div id="close-label" title="Press Esc to close">Close</div></a>
<span id="top-header">WARNING</span>
</div>
<div class="modal-body">
<div class="modal-subhead">
<img class="subhead-icon" border="0" src="">
<span id= "header">WARNING</span>
</div>
<div class="modal-message"><span>If you leave this page, you will lose unsaved changed.</span></div>
<div class="modal-input-first">
<div class="modal-label"></div>
<div id="modal-input"></div>
</div>
<div class="modal-input-second">
<div class="modal-label"></div>
<div id="modal-input"></div>
</div>
<div class="modal-footer">
<a class="secondary" href="#">Cancel</a>
<span id = "button-secondary-label">or</span>
<span class="btn_container">
<span class="btn_left"></span>
<span class="btn_center">Continue</span>
<span class="btn_right"></span>
</span>
</div>
</div>
Right now this is located in a separate file with it's css and javascript and is loaded when the page is loaded.
In the main file I am changing the popup depending on what triggered the popup, just using jquery as such:
$('.modal-message').html('New Message');
$('.modal-subhead #header').text('New header');
The dynamic data is filled in similarly after first making the ajax request to get the data.
As I said, as things grow, i'm having to change a lot of this, and it's starting to feel sloppy. Especially as i'm having to make pixel perfect changes to the css for individual elements. Would it be best to have 3 completely separate sets of html to handle these? Where is the best place for this to live, is the separate file approach?
Is it better to keep adding separate elements as I need specific ones for certain instances, like so:
<div class="modal-input-specific-thing">
<div class="modal-label"></div>
<div id="modal-input"></div>
<div id="modal-input-2"></div>
</div>
Or to use jquery to change the structure of the html on the fly?
var new_input = 'modal-input' + count;
$('#modal-input').attr('id', new_input);
Is there a better method for pushing only the elements needed to a popup like this?
If I had 10-12 scenarios, which is possible as I keep expanding this. Is there a big enough performance hit to parsing 12 different sets of html/css every time page is loaded vs doing what i'm trying to do now...Making a generic/abstracted popup window, and push elements/data to it as the user needs?
Thanks!
I should do this with jQuery and jQuery UI. The jQuery UI has a real nice popup function called dialog. ( http://jqueryui.com/demos/dialog/ )
A working version that reconstruct your situation you will see here. ( http://jsfiddle.net/7GVmz/ )
There are a lot of options you can add so as buttons, callbacks on opening and closing. You can read all of it in the documentation on the jqueryui website ( http://jqueryui.com/demos/dialog/#option-disabled )
Html
<div id="popup-1" title="popup-1">
Hello World
</div>
<div id="popup-2" title="popup-2">
Hello World
</div>
<div id="popup-3" title="popup-3">
Hello World
</div>
JS
$(document).ready(function() {
$('#popup-1').dialog();
$('#popup-2').dialog();
$('#popup-3').dialog();
});
Note
Its important that you load the jquery library and the jquery ui library.
I use SweetAlert for all my JavaScript alerts, it's a Better JavaScript Popup Box than the default and is really simple to use.
swal({<br>
title: "Are you sure you want to leave?",<br>
text: "You have unsaved changes!",<br>
type: "warning",<br>
showCancelButton: true,<br>
confirmButtonClass: "btn-danger",<br>
confirmButtonText: "Yes, Exit!",<br>
closeOnConfirm: false<br>
},<br>
function(){<br>
swal("Deleted!", "Your imaginary file has been deleted.", "success");<br>
});<br>
A full tutorial is here - https://kodesmart.com/kode/javascript-replacement-alert-box