I want use Kendo ui window, but I can't see what the problem is.
<div id="window">
</div>
<div id="rightColumn">
<p>
<asp:Button Text="Edit Advert" Visible="false" ID="btnEditAdv" CssClass="msgbutton" runat="server" />
</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
var window = $("#window").kendoWindow({
title: "Centered Window",
width: "200px",
height: "200px",
visible: false
}).data("kendoWindow");
});
$("#btnOpen").click(function () {
var window = $("#window").data("kendoWindow");
window.center();
window.open();
});
</script>
Assuming btnOpen is an HTML button input and is present on the page, this code should work. You may be missing script references to jQuery or Kendo UI.
Related
I am using an iframe to display a php page. I used a script within the iframe that sizes it to the documents height. This allows the user to scroll the main window without having dual scroll bars on the page. I am using a bootstrap modal within the iframe to display an image. The issue is that when clicked the modal popup is displayed at the top center of the iframe. However if the user had to scroll down the list prior to clicking the 'show image' button, they wont find the popup unless they know to scroll all the way back to the top.
I have searched relentlessly for a solution to this within this site and google with no clear understandable answer. Hoping one of you experts can enlighten me.
Here is my modal code:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<img id="img" src="" width="100%" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the script:
<script>
$(document).on('click', '.getinfoBtn', function(e){
var image=$(this).attr('data-image');
$('#img').attr('src', image);
return false;
});
</script>
Here is the iframe script used to get height of content to be displayed:
<iframe id="form-iframe" src="rooz/on-tap.php" style="margin-top:20px; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>
<script type="text/javascript">
function AdjustIframeHeightOnLoad() { document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>
As stated previously, this code works but pops up the image at the top center of the iframe. I would really like it to either pop up near the button clicked or at least visible.
In my case, using Bootstrap 3.4, what I could make is to catch the show.bs.modal event and setup its position according the click. To avoid the glitch effect, I hide the modal and show it after move it.
I didn't find the way to parametrize the modal in its creation to set it up, instead of enforce it.
$('#theModalDiv').on('show.bs.modal', function (event) {
const modalWidth = 600; // Because #attendeesModal has no lg nor sm size
// and by default, bootstrap modals has 600px width
const target = $(event.relatedTarget);
let newLeft = (document.getElementById('iframe-content-body').offsetWidth/2) - (modalWidth); // Centering the modal
const modal = $(this); // Getting modal instance
modal.css('opacity', '0'); // Hidding modal
// After some time...
setTimeout(() => {
modal.offset({
// ...setting new modal position
...target.offset(),
left: newLeft,
});
// ...setting same top position as the click
$('.modal-dialog').css('margin-top', 0);
// ...displaying again the modal
modal.css('opacity', '1');
}, 500); // This value was taken with rule of thumb
});
I hope someone can find this usefull.
In my code, im using an onclick function to show an element with display:none. If I set a second element to display:none, how can i code the script to show both hidden elements onclick?
Here's the code I'm using:
<div id="element1" style="display:none;"></div>
<div id="element2" style="display:none;"></div>
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
Instead of IDs, use classes for your elements and show all elements with that class name on click (I am using jQuery):
Click Me
<div class="elem" style="display:none;"></div>
<div class="elem" style="display:none;"></div>
<script type="text/javascript">
$('#click-me').click(function() {
$('.elem').show();
});
</script>
You gotta put the all elements on a div container, and when you set the display to none, all elements will disappear.
Without jQuery
<input type="button" value="test element1" onclick="showStuff('element1')">
<input type="button" value="test element2" onclick="showStuff('element2')">
<div id="element1" style="display:none;"></div>
<div id="element2" style="display:none;"></div>
js code :
showStuff = function(id){
document.getElementById(id).style.display = "block";
}
Demo
I have problem in loading placeholder on jqueryui accordin click. I have populated according from backend. i need to populate the place holder based on the accordin header click.
this is my html
<html>
<head>
<script>
$(function () {
$('#login').button({ icons: { primary: "ui-icon-person"} });
$('#showDataSource').button({ icons: { primary: "ui-icon-newwin"} });
$('#logout').button({ icons: { primary: "ui-icon-locked"} });
$('#login').click(function () {
var panel = $('#loginPanel').dialog({ modal: true });
panel.parent().appendTo($("form:first"));
});
$('#logout').click(function () {
(function (event) {
});
});
$('#showDataSource').click(function () {
$('#dataSource').dialog({ modal: true, width: 1000, height: 700 });
$('.accordion').accordion({ autoHeight: false, navigation: true, collapsible: true,
active: false,
changestart: function (event, ui) {
var dataSourceID = ui.newHeader.find('a').attr('id');
//var dataSourceColumn = EasyOutputWeb.Services.GetDataSourceColumns(dataSourceID, onsuccess, onError);
$.post(dataSourceID, function (data) {
//ui.newHeader.next("div").html(dataSourceID);
$('#columnPlaceHolder').html(dataSourceID);
});
}
});
});
});
function onsuccess(msg) {
alert(msg);
}
function onError(msg) {
alert(msg);
}
</script>
</head>
<body>
<div id="dataSource" runat="server">
<div class="divtable">
<div class="headrow" id="#accordianHeight">
<div class="divcol">
Data Sources</div>
<div class="divcol" >
Columns</div>
<div class="divcol">
Strong Keys</div>
</div>
<div class="divrow">
<div class="content">
<div class="accordion" id="accordianHeight">
<asp:PlaceHolder ID="dataPlaceHolder" runat="server" />
</div>
</div>
<div class="content">
<div id="dataColumn">
test column
<asp:PlaceHolder ID="columnPlaceHolder" runat="server" />
</div>
</div>
<div class="content" >
<div id="dataKey">
Test key
<asp:PlaceHolder ID="keyPlaceHolder" runat="server" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The first mistake here is that you use PlaceHolder that they are not warp with any tag and so jQuery can not grab them. Use Panel that warp with span or div your content.
Second mistake is that when the asp.net renders them the final id of each one is get from the .ClientID property, so the code of jQuery will be as:
$('#<%=columnPlaceHolder.ClientID%>').html(dataSourceID);
And one comment, if you do not actually add any controls on code behind on your Panel's then you simple place a <div id="columnPlaceHolder"></div> code to write on them, and use the jQuery call as it is now (don't add the CliendID)
First time programmer here, writing simple program on HTML5. Can't seem to get image to display when button is clicked. Here is my code:
<p>
<center>
<button onclick="DeadTest()">
<img src="BeginTest.gif"/></button></center></p>
<script language="javascript" type="text/javascript">
function DeadTest()
{
<img style="border-width: 0px;" src="White.jpg" width="768" height="1280" />
}
</script>
Have looked through countless sites and forums but just can't seem to get it to work. Have tried an alert() function and it is working. I think it must be something to do with the code to call on the image.
First time programmer so it might look idiotic. Teach me, oh guru's...
Learn the basics first on how to properly call the javascript function and how to change the properties.
See my sample demo. Hope you will learn from it.
http://jsfiddle.net/NgryM/1/
<script type="text/javascript">
function ButtonClick()
{
alert('Button was clicked');
}
function ImageClick(){
alert('Image was clicked');
}
function ChangeImageSrc(){
var img = document.getElementById('myImage');
img.src = "http://www.ivankristianto.com/wp-content/uploads/2011/05/Javascript.gif";
}
function ChangeSize(){
var img = document.getElementById('myImage');
img.height = "80";
img.width = "40";
}
</script>
<p>
<center>
<input type="button" onclick="ChangeImageSrc()" value="Change Image Src"/>
<input type="button" onclick="ButtonClick()" value="Test Button Click"/>
<input type="button" onclick="ChangeSize()" value="Change Size"/>
<img id="myImage" src="http://www.mmncs.com/wp-content/uploads/javascript_logo.gif" onclick="ImageClick()"/>
</center>
</p>
<p><center><button style="background:url('Login_Button.png');width:86px;height:45px" onclick="DeadTest()"></button></p>
<div><img id="img1" style="visibility:hidden" src="a3.jpg" width="768" height="1280" /></div>
<script>
function DeadTest(){
document.getElementById('img1').style.visibility='visible';
}
</script>
I'm using several WordPress loops and jQuery UI Tabs that result in the Main tabs and entry-content div markup below. The WordPress loops generate the "entry-post" markup in each tab div, but I'm not showing the php, as the resulting html markup in each tab div is the important part.
I'm also using a bit of jQuery to independently expand/collapse each entry-content div:
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
What I've found is that each of the entry-content divs keeps their expanded state when switching tabs, i.e. if some of the entry-content divs are expanded in tabone and I switch to tabtwo and then back to tabone, they're still expanded in tabone.
What I need to do is collapse all the entry-content divs in a tab when a tab is changed. Below is the tab init and also the fx to change the tabs.
What do I need to add to this function to collapse all the entry-content divs when a tab is changed?
$(document).ready(function(){
var $tabs= $("#tabs").tabs();
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});
Main tabs and entry-content div markup:
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabone">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabtwo">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabthree">
....
</div></div>
The following code should collapse all .entry-content divs whenever a new tab is selected:
$(document).ready(function() {
var $tabs= $("#tabs").tabs({
fx : {
opacity: 'toggle'
},
select : function(event, ui) {
$(".entry-content").hide();
}
});
});
$("div.post [name^="entry-title"]").hide();
should do what you're wanting when attached next to your fx.
or:
$("#tabs a").click(function () {
$("div.post [name^="entry-title"]").hide();
});
I'm not sure i understand you're question completely. But if you wan't to check whether the tab is triggered or not, try use this:
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
Simplified how you could collapse all divs with class "entry-post", whenever the tab is showed:
$(document).ready(function(){
var $tabs = $("#tabs").tabs({
show: function(){
$('.entry-post').hide();
}
});
});
I'm not a jQuery expert, so here's straight javascript. Might at least help solve the problem...
Since you don't care what tab a div is on (since all divs should be hidden when a tab is changed) you could simply hide all divs on the page every time a tab is changed, regardless of what tab it's on.
var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
divitem.style.display = "none";
}
I wish my jQuery was stronger so I could give it in that, but it may help...
Edit:
Just looking at what your example code, I guess something like this in jQuery:
$("#tabs a").click(function() { $(".entry-content").hide(); });
Something that closes all entry-content class divs when any tab is clicked.
You may want to make use of the existing jquery UI tabs library and this will solve a lot of your problems.
http://jqueryui.com/demos/tabs/
Using this will allow you to make a better association between your list items and the divs they are controlling. Add the reference in your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
or download it and remove what you don't need. Add the following to your CSS
.ui-tabs .ui-tabs-hide {
display: none !important;
}
and change your references so they are in keeping with the jqueryUI specification
<div id="tabs">
<ul>
<li>tabone</li>
and then the div ids to match
<div id="tabs-1">
<div class="entry-post">
this should make the association. You can then add the controlling behaviour so it should read
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
and that will do away with the need to store the array of divs
you can then bind a function to the tabselect event which will hide the divs you want to collapse
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
your code should then read:
<head>
<title>Collapse Divs</title>
<style type="text/css">
.ui-tabs .ui-tabs-hide {
display: none !important;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500);
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabs-1">
<div class="entry-post">
...
<h1 class="entry-title">Title 3.3</h1>
<div class="entry-content">Lorem ipsum...</div>
</div>
</div>
</body>