I have used the following line in my javascript function to show up an element with a class.:
<script type="text/javascript">
function showRates()
{
//load next page
alert("hi");
document.getElementsByClassName('myp').style.display = "block";
}
But, display block is not showing up.
Since you're using jquery-mobile, why not use it?
$('.myp').css('display', 'block');
Also, keep in mind that getElementsByClassName returns a NodeList and doesn't have the style property. if you don't want to use jQuery you'd have to iterate over the elements in the list, then apply the .style.display changes.
You can do it by the following way
$('.myp').hide();
And if you want to display the block then
$(".myp").show();
Related
I'm using angular-foundation and trying to find a way to change the off-canvas menu icon when you open/close the menu. Currently I use:
<a class="right-off-canvas-toggle menu-icon"><span></span></a>
I'd like to replace the "menu-icon" with my own class, but I'm not sure how to hook into the close method. I tried adding an ng-click, but that won't fire on the close since an <a> tag is used to overlay the rest of the page for the close function. I figured based on that, using the off canvas would be the best method.
You can do so hooking into the open.fndtn.offcanvas and close.fndtn.offcanvas events, something like this:
$(document).on('open.fndtn.offcanvas', '[data-offcanvas]', function() {
var off_canvas_icon = $(this).find('.right-off-canvas-toggle');
off_canvas_icon.removeClass('menu-icon').addClass('close-icon');
});
$(document).on('close.fndtn.offcanvas', '[data-offcanvas]', function() {
var off_canvas_icon = $(this).find('.right-off-canvas-toggle');
off_canvas_icon.removeClass('close-icon').addClass('menu-icon');
});
This works …
Link text
but this doesn't …
<script type="text/javascript">
window.onload = function() {
var a = document.getElementById("mylink");
a.onclick = function() {
parent.document.getElementById('frameName').src = 'page.html';
}
}
</script>
<a id="mylink" href="page.html">LINK</a>
Any idea why I can't get the element by id from one iFrame to another? Also I know very little code so I apologize in advance if its obvious.
First i would make sure that the security of the site within the IFrame allows you to do this kind of stuff. Check out this link:
Overcoming "Display forbidden by X-Frame-Options"
Next, i would worry about the target of your anchor tag. With specifying it will default to self. In your second piece of code the target will be _self. Thus, when you click the link your javascript will want to change the source of the IFrame while the link will want to change the entire page. I would pick either a JS or HTML implemetation of linking and not both. Here is something that i put together to show one way of changing the iFrame without an actual anchor tag.
<html>
<body>
<iframe id="frameName" src="page.html"></iframe>
<button onclick="changeFrame()">LINK</button>
<script>
function changeFrame() {
document.getElementById('frameName').src ='page2.html';
}
</script>
</body>
</html>
I have many hrefs(with dynamic Ids) in my asp.net app that have the same CssClass=MyClass.
I want these button to be hidden with a condition.
I used the .ready
$(document).ready(function() {
if(condition)
$('.MyClass').css("display","none");
});
the problem is docuement.ready doesn't execut when there is a poctback.
Postback==>Button visible.normal as i've put the code in .ready.
Is there a way to persist the code:$('.MyClass').css("display","none");
I tried to apply .live() on button load,but it doesn't work.
Any ideas?
Thanks in advance.
You can take a different approach, define the style in CSS, like this:
body.conditionClass .MyClass { display: none; }
Then apply that class to <body> on document.ready, like this:
$(function() {
if(condition)
$('body').addClass('conditionClass');
});
Now new elements with .MyClass, anywhere in the <body> will get the display: none styling.
Use the jQuery livequery plugin: http://brandonaaron.net/code/livequery/docs
live() only binds events. When you have installed the plugin, use:
$('.MyClass')
.livequery(function() {
$(this).css("display","none");
});
This will hide items of class MyClass whenever they are found, even if they are created from a Ajax response. You can even use this code in place of the ready function you are currently using.
In this case, Nick Craver's solution is better, but only if you have to evaluate condition just on page load.
I want to show a loading image before the content of the whole page is loaded. How to achieve this? I'm working in ASP.NET.
Thank you.
NLV
You would need to use Javascript to accomplish this. My preference is jQuery. jQuery has a function that executes when the page is fully loaded, so you could set your main content div to have a css property display:none, and then when the DOM is ready, you could use jQuery to show the content:
$(document).ready(function() {
$("#myContent").css("display", "block");
});
You should initially have the image showing in your HTML, and then hide it when the page loads, like this:
Javascript:
window.onload = function() {
document.getElementById('loadingImageIDHere').style.display = 'none';
};
EDIT: The OP tagged this question as 'javascript', NOT 'jquery'!!
My personal preference is to have a loading image displayed on every page in advance and then use jQuery to hide the image once the page has loaded. It's up to you whether you want to use $(document).ready or $(window).load.
// assumes you already have a DIV#preloader container on your page centered with a loading image inside
// of it
$(document).ready(function() {
$("#preloader").hide();
});
$(window).load(function() {
$("#preloader").hide();
});
Scenario: I have an .aspx page containing multiple collapsible panels. Each panel represents a different report. To run a report, you click a panel and the report's user controls will appear. The date range control I created could be contained "within" more than one panel.
The code below does not work in the multiple panels instance. It sets all of the "to date" text boxes equal to the start date instead of just the active panel's "to date" text box.
How do I only work with the text boxes in the panel I have expanded?
Thanks for your help!
<script type="text/javascript">
$(document).ready(function(){
$('#dFrom').datepicker();
$('#dTo').datepicker();
$('#dTo').click(function(){
try{
var from = $('#dFrom').datepicker("getDate");
$('#dTo').datepicker("setDate",from);
}
catch(Error)
{
alert(Error);
}
});
});
Firstly, you shouldn't be using IDs for any html element that exists more than once, use classes to identify repeating elements instead.
To answer your question, you need to use $(this) to point at the specific element the click event is coming from. You can then simply query the date picker the event is called from by asking for its sibling.
$(document).ready(function(){
$('.dTo').click(function(){
var from = $(this).siblings('.dFrom').datepicker("getDate");
$(this).datepicker("setDate",from);
});
});
I don't know your actual HTML structure so you may have to alter how the siblings are discovered, but hopefully you get the idea.
You need to get a little more relative with your selector syntax. I see you're using the id of each field -- is this shortened from the ASP.Net UniqueID? Because that's definitely not how it would look.
Rather than manually lookup the id, let ASP.Net make of it what it will and find them the jQuery way:
$(Function() {
$('input[id$=dFrom]').datepicker();
$('input[id$=dTo]').datepicker();
$('.panel').each(function() { //replace with appropriate selector syntax for your panels
$(this).click(function() {
var from = $('input[id$=dFrom]',this).datepicker("getDate");
$('input[id$=dTo]',this).datepicker("setDate",from);
});
});
});