jQuery Div Animation - Show w/ URL - javascript

I have Divs show and hide (with an animation) using the following script (I included the jQuery library)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function ShowHide(){
$("#info").animate({"height": "toggle"}, { duration: 1000 });
}
//]]>
</script>
I activate the showing/hiding with
<input type="reset" name="reset" value="Hide Message"onclick="ShowHide(); return false;" /> or similar (for a text link, I do href="#" onclick="ShowHide(); return false;".
All of that works fine, but I want to know how to make it so I can have a div show with a URL. What I mean is that I want to be able to have users go to example.com/?show=test (or similar) and have the div called "test" show.
It really doesn't have to use the same script as above. What I mainly want to use it for is to show a Thank you message for filling out a feedback form show on the homepage in a little box.
Thanks in advance for the help. (I can clarify anything if it was confusing)

You could always parse out the ID of the div from the query string, or more simply use a hash instead, i.e., example.com#test. Then you could just do:
$(document).ready(function() {
var whichDiv = location.hash.split('#')[1];
$('#' + whichDiv).show();
});
You can always just calls show directly on the location.hash, since the raw value begins with the '#' character anyway:
$(document).ready(function() {
var whichDiv = location.hash;
$(whichDiv).show();
});
If you really need to parse out the show parameter:
$(document).ready(function() {
var whichDiv = $.url.param("show");
$(whichDiv).show();
});
The above example makes use of this tiny jQuery URL plugin.

Related

make more entire div clickable on wordpress using jQuery

SUMMARIZE THE PROBLEM
I state that I know practically nothing about html and javascript languages, I know the css. On wordpress, with visual composer, i was trying to make an entire row clickable. I've done it using a jQuery code founded online:
<script type="text/javascript">
jQuery(".LinkZoom1").click(function() {
window.location = "http://www.framedvision.org/portfolio/videomapping_oggetti_milano/";
});
</script>
I've added to the visual composer the object for java and I've put in the code. After I created the classes, inserted the link, added to the CSS the "cursor: pointer" function and everything works correctly.
THE PROBLEM IS THAT IT WORKS ONLY ON A SINGLE ROW. When I try to duplicate the code, assign different classes and links to create more clickable divs, it doesn't work. The result is that only the first div of the page is clickable, the divs are not.
WHAT I'VE TRIED
I tried the following codes in different combinations:
<script type="text/javascript">
jQuery(".class1”).click(function() {
window.location = “#1”;
});
</script>
<script type="text/javascript">
jQuery(".class2”).click(function() {
window.location = “#2”;
});
</script>
<script type="text/javascript">
jQuery(".class3”).click(function() {
window.location = “#3”;
});
</script>
<script type="text/javascript">
jQuery(".class4”).click(function() {
window.location = “#4”;
});
</script>
<script type="text/javascript">
jQuery(".class5”).click(function() {
window.location = “#5”;
});
</script>
Always using the object for java code: I put them all together, put individually in the row that I want to make clickable, it doesn't work. The result is always the same: only the first div becomes clickable. Even moving the object for java code away, from the first row to other rows, the result is the same. The first div is always the only clickable.
I found the solution. By importing the code written above, as corrected by you, it works. I don't know if this method is theorically correct, but it works fine. So...
In the visual composer, you have to insert an object to add the java code in each row that you want to make clickable (for example: for 5 clickable divs, you make 5 objects to insert the java code). Inside each object you have to insert the specific code for each class:
<script type="text/javascript">
jQuery(".class1”).click(function() {
window.location = “#1”;
});
</script>

how to pass value of textbox to another textbox in a modal using javascript?

I have a textbox in my page, what I want is to do some sort of "preview" using a modal, but i cannot display the value of textbox which I put the information i need. Can someone help me?
I use javascript in doing this, but my modal displays empty textbox.
$('#<%= txtDetails.ClientID %>').on('change', function () {
$('input[id$="txtKBDecription"]').text($(this).val());
});
$('#<%= txtIssue.ClientID %>').on('keyup', function () {
$('input[id$="txtKBSummary"]').text($(this).val());
});
$('#<%= area.ClientID %>').on('change', function () {
$('input[id$="txtKBResolution"]').text($(this).val());
});
Really need more specifics, but essentially you're going to grab the value form one and put it in the other whenver it changes.
this goes in your preview modal
<input type="text" id="preview" onchange="Copy();">
and this one goes in your final modal
<input type="text" id="final">
and code...
<script>
function Copy()
{
document.getElementById("final").value = document.getElementById("preview").value;
}
</script>
though it should really be something closer to
<script>
function Copy()
{
var previewValue = document.getElementById("preview").value;
if(previewValue != "" /* Or Other Validation */)
document.getElementById("final").value = previewValue;
}
</script>
you should also consider checking to make sure the elements exist if you are planning on having other people edit the page and/or to make it more robust.

Is there a way to use onclick without really onclick event?

I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?
You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
}​​​;
Demo: http://jsfiddle.net/WNZAP/
As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo
It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>

How to disable all the links and input buttons on a page using jquery

I am working in django and have created a class which has a field closed. When the user sets this value for a particular object, then I want to disable all buttons and links on the object_view page.
I am using the following jquery snippet, but it is not working. Can anybody help me find the mistake
<script type="text/javascript">
$("a").css('cursor','arrow').click(function(){
return false;
});
$("input").attr('disabled','disabled');
</script>
Update: Not working means that all the links and input buttons are still working, i.e. being directed to the correct page. I have included this code snippet in my <head> section.
Try:
<script type="text/javascript">
$(document).ready(function(){
$("a").css("cursor","arrow").click(false);
// for jquery older than 1.4.3, use the below line
// $("a").css("cursor","arrow").click(function(){
// return false;
// });
$(":input").prop("disabled",true);
// for jquery older than 1.6, use the below line
// $(":input").attr("disabled","disabled");
});
</script>
You need the $(document).ready(...) so that the code doesn't run until the elements exist on the page.
I guess you could turn off all links (that is anchor tags) with something like this:
$("a").click(function (e) {
e.preventDefault();
});
This should work for buttons and other inputs
$(":input").attr('disabled','disabled');
You need to wrap the whole thing in:
$(function() {
});
OR
$(document).ready(function () {
});
To limit the input to buttons:
$('input[type="button"]').attr("disabled","disabled");
Otherwise you disable all input elements.

How to get div from second page display in first page

In my main.html page I have a button. When that button is clicked, I need to get the content of another page.
The target page has five divs, I need to catch one div and display that div data in main.html page.
Use Javascript and JQuery. See http://docs.jquery.com/Manipulation or specifically http://docs.jquery.com/Ajax/load
To be precise use something like this:
$("#yourdiv").load("/yourpage.html #section");
jQuery can do this very elegantly:
<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>
<script>
//only when the DOM has been loaded
$(document).ready(function() {
//bind to button id="myButton" click event
$('#myButton').click(function() {
//populate div id="myDiv" with specific div (div id="someDiv") from another page
$('#myDiv').load('/anotherPage.html #someDiv');
});
});
</script>
See jQuery Ajax/load
As long as the second page is on the same domain, you can use AJAX techniques. For example, using Prototype you could do something like this:
new Ajax.Request('http://url.of.second/page', {
method: 'get',
onSuccess: function(transport) {
//make a regular expression to grab the required HTML fragment
var re = /<div id="otherdiv">(.*)</div>/i;
//extract the fragment from transport.responseText
var found = transport.responseText.match(re);
//add the fragment to targetdiv on current page
$('targetdiv').innerHTML=found[1];
}
});
Jiri's answer is spot on.
http://docs.jquery.com/Ajax/load
is the exact jquery link.
Thanks Jiri...

Categories

Resources