Im attempting to create a mouseover event for pictures on a page to load a summary of that picture into a div container called "contentarea". I'm new into coding, so please forgive my inaptitude. The code is below, but im not sure its going to work. Basically, I have 5 pictures of dogs on a webpage, and I want the mouseover event over a picture of the dog to load information from a seperate page called "content.html." The content that is loaded should load from a that has the same ID as the ID of the picture that is cursor is currently hovering over. The content will then load into a div that is below all the pictures called "contentarea." All pictures belong to the class dog. I had tried to adapt someone else's code, but to no effect.
<script>
function(){
$(.dog).mouseover(function(e) {
var dogId = $(this).data('id');
$("contentarea").load("content.html
# " + dogId + " ");
});
</script>
You can actually load another html file using ajax, that is not a problem like zongweil said on his comment, because the content you are loading is not dynamic.
You need to add to specify that .dog is a string by using '. Additionally, please explain what you are trying to achieve using the # dogId. Are there anchors on the html file that you are loading? I don't think you will achieve the expected effect by adding the anchor to the loaded html. If you want to load the info of just one dog, then create several content.html file each with the proper id like content1.html, content2.html, etc and use this:
<script>
$('.dog').mouseover(function(e) {
var dogId = $(this).data('id');
$("#contentarea").load("content" + dogId + ".html");
});
</script>
or instead use a single HTML file with the proper ids:
<div id="dogcontent1">
TEXT TEXT TEXT
</div>
<div id="dogcontent2">
TEXT TEXT TEXT
</div>
and then on the script use this:
<script>
$('.dog').mouseover(function(e) {
var dogId = $(this).data('id');
$("#contentarea").load("content.html #dogcontent"+ dogId );
});
</script>
Related
So i'm working on a chat application and i want to add smileys. So i used two html pages. the first one contain the text area when we wright the messages and an iframe that references the second html page.
<div class="col-12">
<textarea class="col-12 row-12 var_MessageInput" id="textmsg" placeholder="Write a reply..."></textarea>
</div>
in the second html page i have smiley images
<img src="../../../images/sad_smile.gif" onclick="insertSmiley('sad');"/>
<img src="../../../images/angel_smile.gif" onclick="insertSmiley('angel');"/>
<img src="../../../images/happy_smile.gif" onclick="insetSmiley('happy');" />
So i want that when i click at a smiley image that a text got inserted in my text area so i used the following script
function insertSmiley(smiley) {
var currentText = document.getElementById("textmsg");
var smileyWithPadding = " " + smiley + " ";
currentText.value += smileyWithPadding;
currentText.focus();
}
But it doens't work :( i thought the problem might be in document.getElementById since it's another html page but i have no idea how to solve it.
Thanks a lot
Have you included the <script src="Scripts_Chatapp/emoticone.js"></script> in iframe too? If yes, remove the script reference from iFrame.
Move the script reference <script src="Scripts_Chatapp/emoticone.js"></script> at top of page with other script tags.
Change the onclick="insertSmiley('sad');" TO onclick="parent.insertSmiley('sad');".
This will call the parent function and make changes on that page, since element exists on parent.
You have one typo in onclick="insetSmiley('happy');" it should be onclick="insertSmiley('happy');". I checked it and it works for me.
In your JS code, use:
window.location = "second_HTML_Page.html" ;
The problem is that when the function is triggered within the iFrame, the scopes become complicated.
A solution would be to make the function global by defining it at the window level. And then when the function is to be triggered inside the iFrame, it can call the function of the iFrame's parent (the main window).
Example Fiddle: http://jsfiddle.net/e37rrtb1/2/
sorry for the basic question!
I currently have a website and I need a feature where the content of a div is replaced when a user clicks on a hyperlink
I've achieved this using the following:
Click here
<script type="text/javascript"><!--
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
However, I have 2 quick questions - the in the div once the button has been clicked is written as a string in the JS - is it possible to pass in a HTML file that has this text?
I need to make it so that the new text has a new URL - is this possible? (e.g. once a user has clicked on the button, the text is displayed and a new direct URL is available)
I'm assuming you mean something like this:
$('#my-link').on('click', function() {
$('#my-div').load('/file_to_load.html');
$(this).attr('href', "new_url");
});
If you can provide a bit more clarity, I'll refine my answer!
Here's how this works.
jQuery looks for the dom element with the id #my-link, then on click the function block is fired. jQUery $.load will load the content of that url into the div with the id my-div, then change the href attribute of $(this), "this" being the button to "new_url".
I have a little project where I need to show items on one page from a other so I have a little categorie where you can click on. Then I pick the attr("href"); and set that to the page I would like to load. this works.
But how to add a <div> to it so I online load like the <div class="holder"></div> And not the whole div?
This is my function:
function setupCasesFilter()
{
j(".casemenu a").click(function(e) {
e.preventDefault();
j("ul.casesholder").load(j(this).attr("href"));
});
}
Where I can add the class inside attr("href")); ?
If you want to load a specific div element from the url then use it this way:
j("ul.casesholder").load(j(this).attr("href") + " .holder");
What seems to me that you have a .holder div on the href page you are loading, so you can pass that div's class name which you want to load with a space for ex. page.html .holder.
I have a site that has a banner at the top of the page. I've started to overhaul my HTML structure and am now getting various pieces of information that populate the site out of an XML file. My HTML that uses the jQuery is:
<script>
function myExampleSite()
{
var myURL = window.location.href;
var dashIndex = myURL.lastIndexOf("-");
var dotIndex = myURL.lastIndexOf(".");
var result = myURL.substring(dashIndex + 1, dotIndex);
return result;
}
var exampleSite = myExampleSite();
</script>
<script>
var root = null;
$(document).ready(function ()
{
$.get("Status_Pages.xml",
function (xml)
{
root = $(xml).find("site[name='" + exampleSite + "']");
result = $(root).find("headerImage");
$("td#headerImage").html($(result).text());
var imageSrc=$(root).find("headerImage").text();
$(".PageHeader img").attr("src",imageSrc);
result = $(root).find("version");
$("td#version").html($(result).text());
result = $(root).find("status");
$("td#status").html($(result).text());
result = $(root).find("networkNotes");
$("td#networkNotes").html($(result).text());
....etc etc
});
});
</script>
My XML file looks like this.
<sites>
<site name="Template">
<headerImage>images/template-header.png</headerImage>
<productVersion>[Version goes here]</productVersion>
<systemStatus color="green">Normal</systemStatus>
<networkNotes>System status is normal</networkNotes>
</site>
</sites>
I have several <site>s that all have their own data that will populate different areas of individual sites. I've ran into some snags though.
The first snag is how it currently obtains its header image:
html
<div class="container">
<div class "PageHeader"> <!-- Header image read from XML file -->
<img border="0" src=""/>
</div>
Right now it's hard-coded to be the template header image, but I need to make that generic and read the XML value for that site. So instead of being hard-coded as images/template-header.png it would read the XML value for the current site, which is still going to be the template header - but it won't for every page.
How can I read in the image string to populate my HTML so that each site has a different image depending on what's in the XML?
Edit: Edited code to match current issue. Currently, I just get a broken image, but I can still change it back to the hard-coded image URL (images/template-header.png) and it works.
As you already have the code that can extract the image URL information from the XML, which is
result = $(root).find("headerImage");
$("td#headerImage").html($(result).text());
It's now a matter of attaching that URL, to the image tag. We need to select the object, and then simply change it's src attribute. With jQuery this is actually pretty easy. It'll look something like
var root = $(xml).find("site[name='" + site + "']");
//get the image url from the xml
var imageSrc=$(root).find("headerImage").text()
//get all the images in class .PageHeader, and change the src
$(".PageHeader img").attr("src",imageSrc)
And it should work
Example
In conclusion, if you already have some values you want to put in HTML tags dynamically, it's pretty easy. There's .html("<b>bold</b>") for content, there's .attr("attrName","attrValue") for general attributes. .css("background","red") for changing CSS directly. There's also some class modifying stuff that would be useful in the future.
I've got a simple application that requires a DIV to be clicked, and in turn it shows another DIV which needs to have its content updated.
There are around 40 items that will need to be clickable and show the correct label for each.
Here is what I need to happen...
User clicks a DIV (drag_me)
Information box DIV is then shown (flavour_box)
the default word 'Ingredients' is swapped out with the content from the "flavour_descrip" div
Also update the 'choc_flavour' div with the name of the ingredient (choc_label)
The data comes from a database, so I'm unable to set individual ID's.
I had a similar issue with draggable's, but that was fixed, and I've tried doign somethign similar to no avail.
Here is the clickable DIV (flavour_descrip is set as hidden in the CSS)
<li class="drag_me">
<div>
<img src="RASPBERRY.png" />
</div>
<div class="choc_label">
Raspberries
</div>
<div class="flavour_descrip">
Our description will appear here for the DB
</div>
</li>
Here is the HTML for the popup box...
<div id="flavour_box">
<p class"flavour_description">Ingredients</p>
<div class="flavour_add">Add To Mixing Bowl</div>
</div>
Here is the jQuery snippet for the click (i've commented out the code I had started to rejig, but essentially I need to change the draggable.find to something that will work!)
$(".drag_me").click(function () {
//var htmlString = ui.draggable.find('.choc_label').html();
//$('.choc2_flavour').text(htmlString);
// update the description of the item
//var htmlString = ui.draggable.find('.flavour_descrip').html();
//$('.flavour_description').text(htmlString);
// on click of jar make box pop
$("#flavour_box").toggleClass("visible");
});
Any ideas how I can achieve this?
Added extra question
Now I've had my problem resolved, I need to perform one more task.
Inside the div that gets the details passed using "this", I need to be able to pass one more items to a different piece of script.
The DIV 'flavour_add' is clickable and will need to grab the flavour name to use to update some bits on screen and update a URL on the fly.
<div id="flavour_box">
<p class="flavour_name_label">Label</p>
<p class="flavour_description">Ingredients</p>
<div class="flavour_add">Add To Mixing Bowl</div>
</div>
This is the jQuery I have, but using "this" doesn't seem to work
$(".flavour_add").click(function () {
// hide the ingredient box
$("#flavour_box").toggleClass("hidden");
// show the continue box
$("#added_box").toggleClass("visible");
// get the flavour name
var flavourLabel = $(this).find('.flavour_name_label').text();
// update flavour URL
var _href = $("a.to_step_3").attr("href");
$("a.to_step_3").attr("href", _href + '&flavour=' + flavourLabel);
//$("a.to_step_3").attr("href", _href + '&flavour=TestFromAdd');
// update the mixing bowl list with the ingredient
$('.choc2_flavour').text(flavourLabel);
});
Use $(this) to get the reference to the clicked element:
$(".drag_me").click(function () {
var txt = $(this).find('.choc_label').text();
$("#flavour_box > .flavour_descrip").text(txt);
$("#flavour_box").toggleClass("visible");
});
Besides, there was a "typo" in your html code, replace:
<p class"flavour_description">Ingredients</p>
By:
<p class="flavour_description">Ingredients</p>
You can easily achieve this using jQuery.
$(".drag_me").click(function () {
$('.flavour_description').text($('.flavour_descrip').html());
// on click of jar make box pop
$("#flavour_box").toggleClass("visible");
});
I cannot seem to be able to find the divs for step: 4. Also update the 'choc_flavour' div with the name of the ingredient (choc_label)
I will assume that you mean 'flavour_add' in which case the code should look like this:
$('.flavour_add').text($('.choc_label').html());
Try this:
$(document).ready(function() {
var $flavourBox = $('#flavour_box');
var $flavourDesc = $flavourBox.children('.flavour_description');
var $chocFlavour = $flavourBox.children('.choc_flavour');
$('.drag_me').on('click', function() {
var $this = $(this);
$flavourDesc.html($this.children('.flavour_descrip').html());
$chocFlavour.html($this.children('.choc_label').html());
$flavourBox.addClass('visible'); //toggleClass will remove the class if it is there
});
});
get the text by using "this" (the actual clicked element) and then get the child flavour_descrip div
$(".drag_me").click(function () {
$("#flavour_box").show();
$('.flavour_description').text($(this).find('.flavour_descrip').text());
});
then show the flavour_box div and set the value of the div with the flavour_description class