I'm having trouble on getting the video to pause after my modal closes. I'm not an expert on javascript, although I understand enough to mess with it and tweak it to my needs.
I'm not sure where to put the new code to pause it once the user clicks the X button...
Can someone help me out? Thanks!
CODE:
<div class="dcontainer">
<div class="dhex">
<div class="dshape"></div>
</div>
<b>Walter</b></div>
<div class="orgchattitlehead">Head</div>
<button id="myBtnWalter"></button>
<div id="myModalWalter" class="modalWalter">
<div class="modal-contentWalter" style="text-align: left;">
<div class="title" style="text-align: left;">
<span style="font-size: 14pt;"><b><span style="font-size: 18pt;">Walter</span><br /></b></span><span style="font-size: 14pt;">2009 <br /></span><span style="font-size: 14pt;">University</span> <br /><span style="font-size: 14pt;"><br /></span>
<span class="closeWalter">×</span></div>
</div>
<div class="aboutvid" style="text-align: left;"><iframe width="374" height="210" src="https:///app/detail/video/8178476/embed" id="aboutvid" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<script>
var modalWalter = document.getElementById("myModalWalter");
var btn = document.getElementById("myBtnWalter");
var span = document.getElementsByClassName("closeWalter")[0];
btn.onmouseover= function() {
modalWalter.style.display = "block";
}
span.onclick = function() {
modalWalter.style.display = "none";
}
</script>
</div>
</div>
Related
i have the following code. I want that the first part hides when i click on the button.
Can somebody help?
thank you in advance
</div>
<img src="https://sampleurl.com/wp-content/uploads/2021/02/Brief.png" style="width:150px;height:91px;" /><br />
<style type="text/css">.myimgdivtoggle{ display:none;}
</style>
<script>$(document).ready(function(){ $('.togglebtn').click(function(){ $('.myimgdivtoggle').toggle(); });});</script><button class="togglebtn" type="button"><span class="cp_responsive cp_font" data-font-size="20px" style="font-size:20px;"><span data-font-size="18px"><span data-font-size="22px"><span data-font-size="20px"><span data-font-size="19px"><span style="font-family:lato;"><span style="color:#FFFFFF;" date-dismiss=“modal“ arialabel=“Close“>JETZT LESEN</span></span></span></span></span></span></span></button>
<div class="myimgdivtoggle"><img alt="display image on button click" class="img-responsive img-thumbnail" src="https://sampleurl.com/wp-content/uploads/2021/03/Krankmeldung_neu.jpg" /></div> ```
You been to select the both image elements and toggle each inversely.
<div class="myimgdivtoggle2">
<img src="https://sampleurl.com/wp-content/uploads/2021/02/Brief.png" style="width:150px;height:91px;" /><br />
</div>
<button class="togglebtn" type="button">
<span class="cp_responsive cp_font" data-font-size="20px" style="font-size:20px;">
<span data-font-size="18px">
<span data-font-size="22px">
<span data-font-size="20px">
<span data-font-size="19px">
<span style="font-family:lato;">
<span style="color:#FFFFFF;" date-dismiss=“modal“ arialabel=“Close“>
JETZT LESEN
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</button>
<div class="myimgdivtoggle">
<img alt="display image on button click" class="img-responsive img-thumbnail" src="https://sampleurl.com/wp-content/uploads/2021/03/Krankmeldung_neu.jpg" />
</div>
<style type="text/css">
.myimgdivtoggle2{
display:none;
}
</style>
<script>
$(document).ready(function () {
$( ".togglebtn").click(function () {
$( ".myimgdivtoggle" ).toggle();
$( ".myimgdivtoggle2" ).toggle();
});
});
</script>
Inside my page I have a grid which has an edit button. When I press that button I have to fetch its details data and then I need to show those inside a bootstrap modal.
first let me show you the modal,
<div id="template" class="modal fade ui-draggable ui-draggable-handle in" role="dialog" aria-hidden="true" tabindex="-1"
style="overflow-y: hidden; padding-left: 16px;">
<div class="modal-dialog setting-modal-dialog" style="width: 82% !important; margin-top: 2px !important;">
<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">Edit
</h4>
</div>
<div class="modal-body" style="padding: 0">
<div class="template-content" id="div01" style="">
<div id="divTemplateCreatesettings" class="fieldset01">
<table class="quiz-template-table">
<tbody>
<tr>
<td class="title">Header Text
</td>
<td class="title-data">
<asp:TextBox runat="server" ID="txtHeaderText" Width="326px" ClientIDMode="Static">
</asp:TextBox>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Now let me show you how I am calling this modal,
protected void btnEdit_OnClick(object sender, EventArgs e){
//calling and displaying data..
// No issue here..
// calling Modal..
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "key00",
"openModal('');",
true);
}
function openModal(sender, args) {
debugger;
$('#template').modal('show');
return false;
}
Now everything is working as expected , modal is displaying but is't not showing any data..
Please help me .
Thanks & Regards
I have solved my issue,
First wrap the modal content inside an update panel like this,
<div id="template" class="modal fade ui-draggable ui-draggable-handle in" role="dialog" aria-hidden="true" tabindex="-1"
style="overflow-y: hidden; padding-left: 16px;">
<div class="modal-dialog setting-modal-dialog" style="width: 82% !important; margin-top: 2px !important;">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
// .. rest of the code..
<div class="modal-content">
and while calling
event_handler
{
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "key00",
"openModal('');",
true);
upModal.Update();
}
Now it will binding the data but there is an another issue, if there is any script present which is responible for any kind of work wont be working now..
because:
Why Javascript not work after firing Updatepanel in asp.net??
and this link will help you to fix that problem .
In bootstrap with the grid system elements are automatically arranged side by side but is there a way to stack elements one on top of another?
I'm trying to create a photo gallery where i'm displaying 4 images,hiding them and triggering each photo with an assigned button.
But because these images are first arranged side by side,every time I show one image and hide the other the frame is being shifted.
Example:
So if the first image starts at point A the last image ends at point D.
Here is the code that I am using
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$("#gallerytrigger_1").on('click',function(){
$("#gallery_1").toggle();
$("#gallery_2").hide();
$("#gallery_3").hide();
$("#gallery_4").hide();
});
$("#gallerytrigger_2").on('click',function(){
$("#gallery_4").hide();
$("#gallery_3").hide();
$("#gallery_2").toggle();
$("#gallery_1").hide();
});
$("#gallerytrigger_3").on('click',function(){
$("#gallery_4").hide();
$("#gallery_3").toggle();
$("#gallery_2").hide();
$("#gallery_1").hide();
});
$("#gallerytrigger_4").on('click',function(){
$("#gallery_4").toggle();
$("#gallery_3").hide();
$("#gallery_2").hide();
$("#gallery_1").hide();
});
</script
#foreach($gallerys as $gallery)
<div class="col-sm-2">
<br>
<div id="gallery_{{$loop->iteration}}" style="display:none;">
<p style="text-align: center;"><img style="width: 100%;border-radius:
6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
</div>
</div>
#endforeach
#foreach($gallerys as $gallery)
<div class="col-xs-2">
<br>
<div id="gallerytrigger_{{$loop->iteration}}">
<hr>
<img style="width: 200%;border-radius: 6px;margin-left: -12px;margin-
top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
</div>
</div>
#endforeach
Try this code
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(".galleryTrigger").click(function(){
var id = $(this).data('id');
$(".gallery").hide();
$("#gallery_"+id).show();
});
</script>
#foreach($gallerys as $gallery)
<div class="col-sm-2">
<br>
<div id="gallery_{{$loop->iteration}}" style="display:none;" class="gallery">
<p style="text-align: center;"><img style="width: 100%;border-radius:
6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
</div>
</div>
#endforeach
#foreach($gallerys as $gallery)
<div class="col-xs-2">
<br>
<div id="gallerytrigger_{{$loop->iteration}}" data-id="{{$loop->iteration}}" class="galleryTrigger">
<hr>
<img style="width: 200%;border-radius: 6px;margin-left: -12px;margin-
top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
</div>
</div>
#endforeach
I have abround 6000 documents in my mongo collection, which I need to load up into meteor client upon app startup.
In my routes (located under app/client), I have this:
Router.map(function() {
this.route('home', {
path: '/',
template: 'dashboardWrapper',
waitOn: function() {
return Meteor.subscribe('nasdaq');
},
cache: true
});
});
My dashboardWrapper template looks like this:
<template name="dashboardWrapper">
{{#if Template.subscriptionsReady}}
{{> dashboard}}
{{/if}}
</template>
My dashboard template looks like this:
<template name="dashboard">
<div class="container">
<h2>Priority - 1 Incidents Over Time</h2>
<div class="row">
<div id="yearly-bubble-chart" class="dc-chart">
<strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
</div>
</div>
<div class="row">
<div id="gain-loss-chart">
<strong>Days by Gain/Loss</strong>
<a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="quarter-chart">
<strong>Quarters</strong>
<a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="day-of-week-chart">
<strong>Day of Week</strong>
<a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="fluctuation-chart">
<strong>Days by Fluctuation(%)</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-move-chart">
<strong>Monthly Index Abs Move & Volume/500,000 Chart</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-volume-chart">
</div>
<p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
</div>
<div class="row">
<div>
<div class="dc-data-count">
<span class="filter-count"></span> selected out of <span class="total-count"></span> records | Reset All
</div>
</div>
<table class="table table-hover dc-data-table">
</table>
</div>
<div class="clearfix"></div>
</div>
</template>
The relevant part of Meteor.client looks like this:
if (Meteor.isClient) {
var ndx,data;
Template.dashboardWrapper.onCreated( function() {
var template = this;
template.subscribe("nasdaq");
});
Template.dashboard.onCreated( function() {
data = Nasdaq.find().fetch();
ndx = crossfilter(data);
});
Template.dashboard.onRendered(function(){
var self = this;
self.subscribe("nasdaq", function() {
self.autorun(function() {
data = Nasdaq.find().fetch();
});
});
What I expect from this, is for the dashboard template to wait until all the data from the Nasdaq collection loads up.
What happens is absolutely nothing - no data and no errors.
If I remove ironRounter all together, and refresh, I can get a couple of dozen records (out of 6000 total).
Is there a way reliably force the app to wait until every single document loads up?
Try subscribe right before load the current template, may be it will work.
Router.route('/dashboardWrapper/:_id', {
name: 'dashboardWrapper',
waitOn: function () {
return [
Meteor.subscribe('nasdaq')
];
},
data: function () {
return Nasdaq.findOne(this.params._id);
}
});
I have the following code in this jsFiddle.
The problem I'm having is that my child items do not update properly.
I can Click "Edit User" with a problem and see the data changing, but when I attempt to add a note or even if I were to write an edit note function, the data does not bind properly
http://jsfiddle.net/jkuGU/10/
<ul data-bind="foreach: Users">
<li>
<span data-bind="text: Name"></span>
<div data-bind="foreach: notes">
<span data-bind="text: text"></span>
Edit Note
</div>
Add Note
Edit user
</li>
</ul>
<div id="userModal" data-bind="with: EditingUser" class="fade hjde modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>
Editing user</h3>
</div>
<div class="modal-body">
<label>
Name:</label>
<input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'" />
</div>
<div class="modal-footer">
Save changes
</div>
</div>
<div id="addJobNoteModal" data-bind="with: detailedNote" class="fade hjde modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>
Editing Note</h3>
</div>
<div class="modal-body">
<label>
Text:</label>
<input type="text" data-bind="value: text, valueUpdate: 'afterkeydown'" />
</div>
<div class="modal-footer">
Save changes
</div>
</div>
function Note(text) {
this.text = text;
}
var User = function(name) {
var self = this;
self.Name = ko.observable(name);
this.notes = ko.observableArray([]);
}
var ViewModel = function() {
var self = this;
self.Users = ko.observableArray();
self.EditingUser = ko.observable();
self.detailedNote = ko.observable();
self.EditUser = function(user) {
self.EditingUser(user);
$("#userModal").modal("show");
};
this.addNote = function(user) {
var note= new Note("original")
self.detailedNote(note);
$("#addJobNoteModal").find('.btn-warning').click(function() {
user.notes.push(note);
$(this).unbind('click');
});
$("#addJobNoteModal").modal("show");
}
for (var i = 1; i <= 10; i++) {
self.Users.push(new User('User ' + i));
}
}
ko.applyBindings(new ViewModel());
Change this:
$("#addJobNoteModal").find('.btn-warning').click(function() {
To this:
$("#addJobNoteModal").find('.btn-primary').click(function() {
You were targetting the wrong button :)
I think the problem after all was that you must bind to "value:" not "text:" in a form input/textarea.