Develop Reference

Any idea why this javascript preventDefault function is not being called in this scenario?

I have some HTML that should respond to user interaction. It is a page that I am trying to get to work offline. After I load the page while online I end up with fully rendered HTML. Some of the HTML contains show/hide functionality, and is meant to prevent deafult action of an element click. For instance, see this:
<div id="area49253971_6938" class="component interaction-component float-none clear-none interaction_booted">
<div role="status" class="int-prep hidden"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div>
<div>
<div class="data-field interaction-type">RevealContent</div>
<div class="interaction_title"></div>
<div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
<div class="pointer">
<td>
<div id="area49253971_6940" class="component image-component float-left clear-none booted"><img src="somelink" height="50" width="30" title="" alt="" style="padding-right: 10px;"></div>
<p class="body" id="area49253971_6941"><em><strong>Some question</strong></em></p>
</td>
</div>
<div style="display: block;">
<td>
<p class="body" id="area49253971_6942"><strong>Some answer</strong></p>
</td>
</div>
</div>
<div class="interaction_data" style="display: none;">
<div id="area49253971_6939" class="component table-component float-none clear-none ">
<div class="component_caption"></div>
</div>
</div>
</div>
</div>
The app's code is not working offline (I think due to app's ajax calls and a bunch of other dependencies and app-specific stuff). (By the way, you can see the app code I am trying to rewrite into pure jQuery here: https://jsfiddle.net/0s6xdk9q/1/). So I decided to rewrite the app functionality like so:
$(document).ready(function() {
$(this).on('click', '.interaction_booted', function () {
interactionData = $(this).find(".interaction_data");
this.container = $(this).find(".interaction_content");
var contentToReveal = ($(this).find('.RevealContent')).children()[1];
var initialContent = ($(this).find('.RevealContent')).children()[0];
$(contentToReveal).slideToggle('slow');
var a = initialContent.find('a');
a[0].addEventListener("click", function(e){
e.preventDefault();
}, false);
});
});
Something is not quite right. Maybe because I have multiple click events. In any case, I confirmed by stepping through the code in Chrome that the variable a is indeed the element I expect. All element selectors are working fine. But nothing I do is resulting in this preventDefault from working. I have a feeling there is a simple answer, just not seeing it. Also, I am trying to do this in a way that doesn't require me to add anything to the HTML.
Thoughts?
thanks,
Brian

jQuery how to store images source into a temporary memory and retrieve it later

Please check below image.
When I will click on the hide images all the images show replaced with a static image and later when I will uncheck it it must show the original images now.
<div id="log_contents">
<span style="color:blue;"><b>Public chat</b> with <b>dragos123</b></span> <br><br>
<div class="chat-line">
<span class="dialogue_time"> 11:00:39 AM </span>
<span style="background-color:FFF;">debasish:</span>
<span style="background-color:FFF;"><img style="cursor:pointer; max-height:80px;" src="http://localhost/myshowcam/files/stickers/msc-1427684408.gif" title=":party1"></span>
</div>
<div class="chat-line">
<span class="dialogue_time"> 11:01:43 AM </span>
<span style="background-color:ffff88;">pkk:</span>
<span style="background-color:ffff88;">hiiiiiiiiiiiiii</span>
</div>
<div class="chat-line">
<span class="dialogue_time"> 11:02:03 AM </span>
<span style="background-color:ffff88;">pkk:</span>
<span style="background-color:ffff88;"><img style="cursor:pointer; max-height:80px;" src="http://localhost/myshowcam/files/stickers/msc-1427684892.gif" title=":1min"></span>
</div><div class="pagination" style=""></div>
</div>
Please give your valuable feedback.
Thank you.

You need to hold the information regarding the original vlaue somewhere, otherwise, it would not be possible to revert this change.
I would change the initial code to something like
$("#log_contents").find('img').each(function() {
$(this).data('img-org', $(this).attr('src'));
$(this).attr('src', 'img/hide-image.gif');
});
and to reverse it, you just need to do the opposite
$("#log_contents").find('img').each(function() {
$(this).attr('src', $(this).data('img-org'));
});

You could use some attribute to store original image source. It's not valid HTML, but it should work.
Edit: #Kami's answer with data() was better, so I've changed mine:
function change(element){
if($(element).prop('checked')){
$("img").each(function() {
$(this).data("old-src", $(this).attr("src"));
});
$('img').attr("src", 'http://img005.lazygirls.info/people/tamanna_bhatia/tamanna_bhatia_tamanna_latest_images_7_jpg_jpeg_image_1024_1226_pixels_scaled_76__qWkMn2nO.sized.jpg');
} else {
$("img").each(function() {
$(this).attr("src", $(this).data("old-src"));
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" /><br />
<img src="http://www.britishlegion.org.uk/ImageGen.ashx?width=800&image=/media/2019101/id23055-normandy-66th_-schools-visit-poppy-choice_-pupils-from-london-city-academy.jpg" /><br />
<input type="checkbox" onclick="change(this)" /> Images off!

Remove words from <div> generated on load

I am working on a webpage for a family member, and most content is generated upon load.
My specific problem lies in a news-function, where you can add new products. Because of the way the website is built we have added a link to the news-item, in order to allow costumers to go directly to the product. ( link is "Se mere" )
Trouble is:
When adding the new item to the news-feed, all links and formatting disappears when its shown on the right side of the page. (This is where the code is from)
Therefore, i would like to remove the "Se mere" text from the right coloumn, in the div class = "NewsItemPreviewText"
Unfortunately, i cannot access that part of the code, so i cannot choose what and how its printet.
Here you can see original code that i have access to,
`<div id="RightColumn">{$Design.rightColumn}</div>`
and this is how the code looks when generated.
<div id="RightColumn">
<div id="pagenews-box">
<div id="pagenews-box-top">
<h2>Nyheder</h2>
</div>
<div id="pagenews-box-content"> <div class="NewsItemPreview NewsItem1">
<div class="NewsItemPreviewImg">
<a href="/nyheder/4-revitive-isorocker-/#4" title="Revitive Isorocker ">
<img src="/upload_dir/news/REVITIVEIX.w50.h50.crop.jpg" style="border:0px;" alt="Revitive
Isorocker ">
</a>
</div>
<div class="NewsItemPreviewContent" style="width:110px">
<div class="NewsItemPreviewDate">
<a href="/nyheder/4-revitive-isorocker-/#4" title="Revitive Isorocker "
class="NewsItemPreviewLink">Revitive Isorocker </a>
<br>
<div class="NewsItemPreviewDateCreated">26/11 2014 kl. 12:20
</div>
</div>
<div class="NewsItemPreviewText">
Årets julegavehit!
KUN 1795,-kr. hos os!
Se mere
</div>
</div>
</div>
</div>
<div id="pagenews-box-bottom">
</div>
</div>`
</div>
I hope you can help, please let me know if i have omitted any necessary details or code.

Using JQuery this can be done by targeting the container("NewsItemPreviewText") containing the text "Se mere" and removing it.
$('.NewsItemPreviewText:contains("Se mere")').each(function(){
$(this).html($(this).html().split("Se mere").join(""));
});
JSFiddle

You can remove it with jQuery.
http://jsfiddle.net/wilchow/pzrn88m4/
$(document).ready(function() {
$(".NewsItemPreviewText").text($(".NewsItemPreviewText").text().replace("Se mere", ""));
});

Hope this helps :)
$(':contains("Se mere")').each(function(){
$(this).html($(this).html().split("Se mere").join(""));
});

JavaScript variables used inside html

I have to make a mock-up website for a school assignment. The website involves a search feature. For the assignment, the search feature does not have to be fully functional; So for the mock-up, I want to have an iframe that will change the src="" value after a button is pushed. At first, the iframe will display an image, then after the client/user enters something (any string the input doesnt matter) and hits "search", I want the src for the iframe to change. I was wondering if there was any way to do this using javascript. I'm fairly new and know very little about javascript. The iframe that I need to change has and id of search_frame. This is my code:
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="HOME.CSS"/>
</head>
<body>
<div id="main">
<div id="top" >
<a href="" id="LOGO">
<img alt="LOGO" height="37" src="LOGO.JPG" width="342" />
</a>
<img id="Cheetah_Logo" alt="cheetah_logo" height="29" src="Cheetah_Corner.PNG" width="205" /><a id="CHEETAH_LINK">
</a>
</div>
<div id="center">
<div id="Left_Section">
<div id="checkBox">
<form>
<input type="radio"/>Text-Books
<input type="radio"/>eBooks
<input type="radio"/>Class-Notes
<input type="radio"/>Exams
<input type="radio"/>Tutors
<input type="radio"/>Software
<input type="radio"/>Homework
<input type="radio"/>Free-Stuff
<input type="radio"/>Events
<input type="radio"/>Other
<a id="Advanced" href="http://Home.html">Advanced Search</a>
</form>
<div id="search_Div">
<form id="Search">
<input id="search_Bar" type="text" />
<button>Search</button>
</form>
</div>
</div>
<div id="search_results">
<iframe id="search_frame" scrolling="yes" src="image.png">
Your system does not support frames
</iframe>
</div>
<div id="links">
<a href="Product.html" id="link_product">
</a>
<a href="profile_2.html" id="link_profile">
<img id="profile_button" alt="profile_button" src="profile_button.jpg" />
</a>
<a id="click_here" href="profile_2.html">
Click here to view your profile!
</a>
</div>
</div>
<div id="bottom">
<center>
<img src="bottom_bar.JPG" alt="bottom_bar" />
</center>
</div>
</div>
<div>
<img src="Left_Filler.JPG" alt="Left_Filler" id="Left_Filler"/>
<img src="Right_Filler.JPG" alt="Right_Filler" id="Right_Filler"/>
</div>
</div>
</body>
</html>
This is the idea general idea of the type of script I want to run:
This will set the iframe to the image:
<script type="text/javascript">
function rowdy(num){
variable1='Rowdy.jpeg';
return variable1;
}
</script>
This is my mocksearch once the button is pushed:
<script type="text/javascript">
function mockSearch(var1)
{
var1='Results_Mock_CSS.css';
return var1;
}
</script>
I know these are incorrect, but I was thinking there might be a way to put the function calls inside the src for the iframe, any help, guidance, or ideas will be greatly appreciated, thanks in advanced!

You just need to have click event on your button like,
<input type="button" value="Search" onclick="SearchClicked();"/>
And that click can change the source like below.
<script type="text/javascript">
function SearchClicked() {
document.getElementById('search_frame').src = 'Rowdy.jpg';
}
</script>

First, kill the "form" element as that basically indicates a trip back to the server which you don't want (sortof, you may want it back later but leave that until you understand it). Then install an onclick handler for the button that locates the iframe and updates the src attribute.
Something like
<div id="search_Div">
<input id="search_Bar" type="text" />
<button onclick="document.getElementById('search_frame').src='Rowdy.jpeg';">
Search</button>
</div>
will do it.

As a previous answer states, you could use the onClick property. You could also use jQuery magic (which would be less efficient, but for a school project, the difference is negligible).
First, in the head, you'd have to import jQuery with the statement
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
and then, you could put right after it
<script>
$(document).ready(function() {
$('button').click(function() {
$('#search_frame').attr('src', 'Rowdy.jpg');
}
}
</script>
to bind a method to the click event on the button.

How to have a page load to the middle of the page (instead of top)?

I'd like for the page to open at a certain div halfway down the page, not at the top...
I have something like:
<div id="d1">
<div id="d2">
<div id="d3">
<div id="d4">
<div id="d5">
<div id="d6">
How can I get the page to open at #d4, instead of the top? (Besides adding #d4 to the end to the URL...)
I imagine there must be some easy way to do this, but I can't figure out how to go at searching for a solution! HTML, javascript? Any help is greatly appreciated.

<script>
function ScrollToElement(theElement){
var selectedPosX = 0;
var selectedPosY = 0;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
window.scrollTo(selectedPosX,selectedPosY);
}
</script>
http://radio.javaranch.com/pascarello/2005/01/09/1105293729000.html

Find div position using this
and then use the following javascript command:
window.scroll(0, DIV_POS); // horizontal and vertical scroll targets

EDIT: OOPS! didn't read the Except.... disregard!
Note to self, read the entire question before responding!
End EDIT
You could always use an HTML anchor tag
<a name="d1" />
<div id="d1">
<a name="d2" />
<div id="d2">
<a name="d3" />
<div id="d3">
<a name="d4" />
<div id="d4">
<a name="d5" />
<div id="d5">
<a name="d6" />
<div id="d6">
When you navigate to the page, you would include the anchor name in the url:
pagename.htm#d4
Make sure to close your div tags.
Good luck,
Patrick

You can use Javascript:
location.replace('#d4');