Cannot display more than one popup simulteneously - javascript

I want to show 4 popup windows, at the same time, which show 4 different flash slides after a respective image button is clicked.
I used JavaScript to make the popup window but cannot complete the rest of the image button. When i click on the button random flash slide plays.
Please refer below code :-
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="ddmenu/ddmenu.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico"/>
<script src="ddmenu/ddmenu.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("[id*=a]").live("click", function () {
$("#dialog26").dialog({
title: "DMD Officers",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=b]").live("click", function () {
$("#dialog27").dialog({
title: "Outsourced Photographs",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=c]").live("click", function () {
$("#dialog28").dialog({
title: "DMD Dog Squad",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=d]").live("click", function () {
$("#dialog29").dialog({
title: "Snake awareness campaign",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td colspan="3" class="auto-style9">
<nav id="ddmenu">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
</td>
</tr>
<tr>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="a" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
<div id="dialog26" style="display: none;">
<embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="b" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
<div id="dialog27" style="display: none;">
<embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="c" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
<div id="dialog28" style="display: none;">
<embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="d" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
<div id="dialog29" style="display: none;">
<embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

This code here $("[id*=btnPopup]") is means that is capture all buttons that contains the btnPopup !, since the rest buttons contains that because of the name (btnPopup2,btnPopup3,btnPopup4) you have capture all with the same (first) code, and what ever you press only the first is fired.
So rename the first button to btnPopup0 if you like to use this code as it is and make it work.
Reference :
https://api.jquery.com/attribute-contains-selector/
But I see more bugs...
in this line $("#dialog").dialog({ that exist on every call, is still call the same part of the page to make it dialog, but I see that the other parts have names like dialog1, dialog2 etc... so this is something that you must fix also.

lots and lots of mistake in your code !!! .Let me point out one by one.
1. $("[id*=a]").live("click" : Similar code exist in other 3 sections. Do Not Use Live to bind events. Its deprecated, and deprecated for good reasons. Taken from the doc
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Also in your scenario [id*=a] is not required. Simply id=a would be sufficient.
live() jquery API Document
2. $("#dialog").dialog({ : You have the same code in other 3 sections as well. You are binding events to the same id. Which is a BIG NO. Do not use same Id's Id's has to be unique in the entire DOM. You can make use of class. Just put the same class name to all the divs and then bind events using the class name.
- When you bind events by using ids Jquery will find the first element with that id in the DOM (reading from top) and binds the event to onle that element.
You are repeating the same script logic multiple times, make it Generic. So cleaning up your HTML and SCripts, Below is what you actually need.
HTML
<tr>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="a" class="imageDialog" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
<div class="dialog" data-dialog-title="DMD Officers" style="display: none;">
<embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="b" class="imageDialog" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
<div class="dialog" data-dialog-title="Outsourced photographs" style="display: none;">
<embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="c" class="imageDialog" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
<div class="dialog" data-dialog-title="DMD Dog Squad" style="display: none;">
<embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="d" class="imageDialog" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
<div class="dialog" data-dialog-title="Snake awareness campaign" style="display: none;">
<embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
</div>
</td>
</tr>
Note: I added a class to all the imageButton, And then changed the div id to class. Also added data-dialog-title attribute to hold the titles for the dialog. More About data Attribute You will see its usage below.
Script
<script type="text/javascript">
$(function(){
$.each('.dialog',function(){ //loop all the div's and apply plugin for all of them
$(this).dialog({
title: $(this).data('dialog-title'), //extract the title here.
height: 700,
width: 1000,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
});
$(".imageDialog").on("click", function() {
$(this).closest('td').find(".dialog").dialog( "open" ); //this is how you open the dialog, taken from the plugin site.
});
});
</script>
On document ready apply the dialog plugin to all the div's with class dialog
Bind event to all imageButton by just using class selector .imageDialog
trace up to the parent td, then trace down to find the div with class name 'dialog' and open it.

Related

Flow Player Not Working For in Asp.Net C#

I am working in asp.net c# project, in that i have to play videos from folder path.
iam trying below code, the video path binding in datalist is correct, but when i press play button its always spinning, no videos display
<asp:DataList ID="DLVideos" RepeatColumns="2" runat="server">
<ItemTemplate>
<a class="player" style="height: 300px; width: 300px; display: block" href='<%# Eval("Column1","../Uploads/App_Videos/{0}") %>'></a>
<br class="clear"/>
</ItemTemplate>
</asp:DataList>
<script src="../FlowPlayer/flowplayer-3.2.12.min.js" type="text/javascript"></script>
<script src="../FlowPlayer/flowplayer.embed-3.2.11.js" type="text/javascript"></script>
<script src="../FlowPlayer/flowplayer.embed-3.2.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
flowplayer("a.player", "../FlowPlayer/flowplayer-3.2.16.swf",
{
plugins: {
pseudo: { url: "../FlowPlayer/flowplayer.pseudostreaming-3.2.12.swf" }
},
clip: { provider: 'pseudo', autoPlay: false},
});
</script>
<a href="http://stream.flowplayer.org/flowplayer-700.flv" class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="player">
</a>
my question is :
does flow player not support other video formats?(i have used .3gp format)
For Referance : http://flash.flowplayer.org/demos/plugins/javascript/embed.html
pls help to play video in asp.net c#, any othe code welcome.

How do you combine JavaScript code and html code together?

I am newer to Javascript and HTML. I want to check whether an image is loaded or not. I found this code on StackOverflow,but I don't know how to combine them into a finished piece:
Any one can tell me?
The js code:
<script language="JavaScript">
$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) $(this).load();
});
</script>;
The html code:
<div>
<table width="100%" height="100%" align="center" valign="middle">
<tr>
<td bgcolor="258cca"><td align="center" valign="middle">
<p>
<img src="http://www.freeiconspng.com/uploads/cute-ball-stop-icon-png-1.png">
</p>
<p class="STYLE1 STYLE2"></p>
</td>
</tr>
<tr></tr>
</table>
<BODY ondragstart="return false;" ondrop="return false;">
</div>
The CSS:
body {
background-color: #558CCA;
}
.STYLE1 {
color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;
}
.STYLE2 {
font-size: 21px;
}
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
body {background-color: #558CCA;}
.STYLE1 {color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;}
.STYLE2 {font-size: 21px}
</style>
<title></title>
<script type="text/javascript">
window.onload=function(){
$("img").on("load", function() {
}).each(function() {
if(this.complete) $(this).load();
});
}
</script>
</head>
<body>
<div>
<table width="100%" height="100%" align="center" valign="middle">
<tbody>
<tr>
<td bgcolor="258cca"></td><td align="center" valign="middle">
<p>
<img src="http://www.freeiconspng.com/uploads/cute-ball-stop-icon-png-1.png">
</p>
<p class="STYLE1 STYLE2"></p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Fiddle
The code you found is using jquery library so in order for it to work, you must first GET the jquery plugin in your page, just put this code anywhere in your document. For faster loading make it at the bottom of your page. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Secondly, put your jquery code UNDER this link, otherwise it won't work.
This is a basic starter html template
<html>
<head>
<script language="Javascript">
Function here
</script>
</head>
<body>
Html code here
</body>
</html>
Put the <script>...</script> block to the end of your page, before the </body> tag. If you have your scripts at the top of the page, it can cause mistakes sometimes.
A few errors in your code :
There should be no semicolon after the script tag
jquery has "on" method, its misspelled "one" here
When in one file the basic html page syntax goes as:
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
/* css styles go here*/
body {
background-color: #558CCA;
}
.STYLE1 {
color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;
}
.STYLE2 {
font-size: 21px;
}
</style>
<script type="text/javascript">
// javascript/jquery code goes here
$("img").on("load", function() {
// do stuff
}).each(function() {
if(this.complete) $(this).load();
});
</script>
</head>
<BODY ondragstart="return false;" ondrop="return false;">
<div>
<table width="100%" height="100%" align="center" valign="middle">
<tr>
<td bgcolor="258cca"><td align="center" valign="middle">
<p>
<img src="http://findicons.com/files/icons/1072/face_avatars/300/a05.png">
</p>
<p class="STYLE1 STYLE2"></p>
</td>
</tr>
<tr></tr>
</table>
</div>
</body>
</html>

Understanding which div is clicked by the end user while opening a modal window

I would like to open a modal view when a user creates some hyperlinks. There will be many hyperlinks on the page, so I would like to understand which div, related to the clicked hyperlink, I should present the user as a modal view.
The code I wrote is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Test</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script>
function OpenModal() {
$("#divModal").dialog({
autoOpen: false, modal: true, title: 'Modal', width: 'auto', height: 'auto'
, buttons: { "Cancel": function () { $(this).dialog("close"); } },
}).dialog('open');
return false;
}
</script>
</head>
<body>
View Page
<div style="display:none;" id="divModal" >
<iframe id="myIframe" src="/menu.php" width="1000" height="800" ></iframe>
</div><br />
<a href="#" onclick="javascript:OpenModal();" >Trip Planning</a>
<div style="display:none;" id="divModal2" >
<iframe id="myIframe2" src="tripplanning.php" width="1000" height="800"></iframe>
</div><br />
</body>
</html>
All I want is to make #divModal in the OpenModal function dynamic, the clicked div it should be.
I appreciate if someone helps. Thanks.
EDIT: What should I do if there is a specific <a> that should redirect user to another page instead of displaying a modal view? How can I check it in the js function?
Find a bus
<div style="display:none;" id="divRedirect1" >
<iframe id="myIframe3" src="/transit/findbus.php" width="800" height="600"></iframe>
</div>
For example, here if user clicks 'Find a bus', the user should go to the findbus.php, not see a modal view.
Thanks.
EDIT2: I have just notified that the selected correct answer of this question also advises me to use class while defining <a> tags. So I followed his advice. The problem has solved like:
Trip Planning
<div style="display:none;" id="divModal" >
<iframe id="myIframe1" src="/transit/access_a_bus.php" width="800" height="600"></iframe>
</div>
Find a bus
<script>
$(function() {
$('.displayModalView').click(function(e) {... //same what he wrote...}
});
</script>
Firstly, change the href attribute of the a element to be a selector for the div you want to turn in to a modal, and also remove the outdated onclick attributes.
View Page
<div style="display:none;" id="divModal" >
<iframe id="myIframe" src="/menu.php" width="1000" height="800" ></iframe>
</div><br />
Trip Planning
<div style="display:none;" id="divModal2" >
<iframe id="myIframe2" src="tripplanning.php" width="1000" height="800"></iframe>
</div><br />
You can then hook to the click event of those a elements in JavaScript:
<script>
$(function() {
$('a').click(function(e) {
e.preventDefault();
var target = $(this).attr('href');
$(target).dialog({
autoOpen: false,
modal: true,
title: 'Modal',
width: 'auto',
height: 'auto',
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
}).dialog('open');
});
});
</script>
I would suggest you make the a selector a little more specific by using a class, however this will work given the HTML in your question.

How call Javascript Function

I have code (see below) in my webpage. With below code i get two flash mp3 players on the web page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" src="Contents/swfobject.js"></script>
<script type="text/javascript">
function stop() {
document.getElementById("myId1").SetVariable("player:jsStop", "");}
</script>
</head>
<body>
<form id="form1" runat="server">
<table style="width:100%; text-align: center;">
<tr>
<td>
<script type="text/javascript">
swfobject.embedSWF("Contents/player_mp3_maxi.swf", "myId1", "250", "20", "9.0.0", false, false, {menu: "false",flashvars: "mp3=Contents/Sleep Away.mp3"}, false);
</script>
<div id="myId1"
style="position: relative; width: 250px; height: 20px; ">
</div>
</td>
</tr>
<tr>
<td>
<script type="text/javascript">
swfobject.embedSWF("Contents/player_mp3_maxi.swf", "myId2", "250", "20", "9.0.0", false, false, {menu: "false",flashvars: "mp3=Contents/Kalimba.mp3"}, false);
</script>
<div id="myId2"
style="position: relative; width: 250px; height: 20px; ">
</div>
<br />
Stop
</td>
</tr>
</table>
</form>
</body>
</html>
The above code works fine and all i need now that only one flash mp3 player should play the audio at one time. For example if i click on flash plyer 2 then falsh player 1 should stop and vice versa. I can stop flash players with click event with below code but this is not fulfilling what i need.
I have put below function in head tag
<script type="text/javascript">
function stop() {
document.getElementById("myId1").SetVariable("player:jsStop", "");}
</script>
and this in body tag
Stop
Can please any friend tell me that how can i achive what i need with above stop function. Or where should i put this code so when i click on fash player 2 then flash player 1 should stop playing audio.
Make only one of the players start on page load.
Then, make a handler that will be ran on a click on one of the players. If the click was originated from player1, them stop it and start player2 (and viceversa).

input button to resize shape

Hi can someone please help me with getting the buttons to resize the shape. I have had a go myself but cannot get it to work. Below is the code I have so far thanks in advance
<html>
<head>
<script>
function Smaller()
{
document.getElementById("rectangle1").height="50";
document.getElementById("rectangle1").width="50";
}
function resetsize()
{
document.getElementById("rectangle1").height="200";
document.getElementById("rectangle1").width="300";
}
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 500px; height: 500px">
<rect id="rectangle1" x="150" y="0" width="300" height="200" />
</svg>
<input type="button" onclick="Smaller" value="Smaller" />
<input type="button" onclick="resetsize" value="ResetSize" />
</body>
</html>
<html>
<head>
<script>
function smaller() {
document.getElementById("rectangle1").style.height="50px";
document.getElementById("rectangle1").style.width="50px";
}
function resetsize() {
document.getElementById("rectangle1").style.height="200px";
document.getElementById("rectangle1").style.width="300px";
}
</script>
</head>
<body>
<div style="min-height:500px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 500px; height: 500px" id="rectangle1">
<rect x="150" y="0" width="300" height="200" />
</svg>
</div>
<input type="button" onclick="smaller()" value="smaller" />
<input type="button" onclick="resetsize()" value="ResetSize" />
</body>
</html>
Please look at the on click propery of the buttons. And there is no id for yor svg element. :- )
You can access a DOM element's CSS properties with the style attribute, like this:
function smaller() {
document.getElementById("rectangle1").style.height="50";
document.getElementById("rectangle1").style.width="50";
}
function resetsize() {
document.getElementById("rectangle1").style.height="200";
document.getElementById("rectangle1").style.width="300";
}
A few notes about your coding conventions: You typically want to having opening function brackets on the same line as the name of the function. Function names should be camelCase at all times; save UpperCase for class names only. Finally, make sure you tab in stuff inside of functions, if statements, etc. Your fellow developers will thank you. =)
Edit: make sure your HTML looks like this:
<input type="button" onclick="smaller()" value="Smaller" />
<input type="button" onclick="resetsize()" value="ResetSize" />
use jQuery to avoid this DOM abomination document.getElementById("fooo")

Categories

Resources