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.
Related
I've been struggling to understand how to overcome this problem. I've been tasked to retrieve user input, and on keystroke see if user input matches any amount of .tags If not, hide the .thumb-display.
So far, I've been able to gather that I'll need to add/remove the classlist "hidden" as well use the event handler "input", however I don't quite understand how to use event handler "input" in this context as well as change event.
This is for homework so I'd much rather have an explanation for an answer, rather than just an answer so I can understand what I currently can't. Even a hint could be vital and set me on the right track! Rules are: no changing HTML and must use JavaScript.
Here is the HTML:
<form class="frm-filter">
<div class="frm-group">
<a class="reset hidden" href="#">Reset</a>
<input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />
</div>
</form>
</nav>
<section class="gallery">
<div class="row">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="thumb-display">
<img src="img/thumbs/african_road_to_the_mountain.jpg" alt="african road to the mountain" />
<p class="tags">#africa #mountain #road</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/beach_and_palms.jpg" alt="beach and palms" />
<p class="tags">#palmbeach #distantpeaks</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/beach_road.jpg" alt="beach road" />
<p class="tags">#oceanbeach #mountainroad</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/calm_lake.jpg" alt="calm lake" />
<p class="tags">#lake #clearskies #onthewater</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/fall_bridge.jpg" alt="fall bridge" />
<p class="tags">#fallcolors #bridgecrossing #river</p>
</div>
</div>
</section>
You need to listen on input keyup event and retrieve value from input then check if that value matches any tags and show/hide `parentNode
document.addEventListener('DOMContentLoaded', () => {
const inputEl = document.getElementById('filter');
const tags = Array.from(document.querySelectorAll('.tags'));
inputEl.addEventListener('keyup', () => {
const value = inputEl.value;
tags.forEach(tag => {
if (tag.textContent.includes(value)) {
tag.parentNode.style.display = 'block'
} else {
tag.parentNode.style.display = 'none'
}
})
})
})
<form class="frm-filter">
<div class="frm-group">
<a class="reset hidden" href="#">Reset</a>
<input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />
</div>
</form>
<section class="gallery">
<div class="row">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="thumb-display">
<img src="img/thumbs/african_road_to_the_mountain.jpg" alt="african road to the mountain" />
<p class="tags">#africa #mountain #road</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/beach_and_palms.jpg" alt="beach and palms" />
<p class="tags">#palmbeach #distantpeaks</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/beach_road.jpg" alt="beach road" />
<p class="tags">#oceanbeach #mountainroad</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/calm_lake.jpg" alt="calm lake" />
<p class="tags">#lake #clearskies #onthewater</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/fall_bridge.jpg" alt="fall bridge" />
<p class="tags">#fallcolors #bridgecrossing #river</p>
</div>
</div>
</section>
You need to get user input. So you need to listen for an event. Add Event Listener to the rescue. Which event, though? How about "change".
Ok, so you can get what they typed, good. Now you need to compare it to the tags. So it's time to find all of those. You can get all of the ".tags" with a querySelector. That will get you a list of nodes that you can loop through to collect the innerText. You can check if the innerText includes the input that the user typed. If it doesn't, then you find the closest ".thumb-display" and set a style attribute to hide it. If the input IS in the innerText, then you need to remove any style attribute that is hiding the closest parent.
Boom, done. Maybe, I didn't try it an I almost never get it right the first time. But it would be something along those lines.
I found many solutions related to my problem but no seems to solve my problem.
Let me first clear my question properly.I have many items on a page;product items that can be shown in this page.
So for every item on the page , i have an image source which is obtained from the other page.
<img itemprop="image" src="/imageThumbnail.php?product_code={$obj->product_code}&page=productDisplay" >
This is just one image tag,the whole code that displays a product looks like this
$imgID=0;
while ($obj = $results->fetch_object()) {
$productPrice=($obj->price);
$weight=$obj->amount;
$weight=str_replace('kg',"",$weight);
$products_item .= <<<EOT
<li class="product">
<form itemscope itemtype="https://schema.org/Product" class="get_method_product_forms" action="/landing_cake/" method="get">
<div style="position: relative" class="product-thumb">
<div class="box">
<img src="/cart/images/loader.gif" id="{$imgID}">
<img itemprop="image" class="loaderGIF" src="/imageThumbnail.php?product_code={$obj->product_code}&page=productDisplay" ><img id="overlay" src="/cart/images/soldOut.png"><div class="overbox">
<div class="title overtext"></div>
<div class="tagline overtext"><p style="font-size:20px;">
<span id="fon"></span><button id="{$obj->product_code}" class="wishlist" >♥</button>
</div>
</div>
</div></div>
<div class="product-content"><h3 itemprop="name" style="margin-top:10px">{$obj->product_name}</h3>
<div class="product-info">
<span itemprop="offers" itemscope itemtype="https://schema.org/Offer" >
<i itemprop="priceCurrency" content="INR" class="fa fa-inr"><span itemprop="price">{$productPrice}</span></i>
<span itemprop="weight">{$weight}</span>
<input itemprop="availability" itemtype="https://schema.org/OutOfStock" content="Out Of Stock" type="hidden" name="product_qty" value="Sold Out"/>
</span>
<fieldset>
<label content="{$obj->product_company}" itemprop="manufacturer">
{$obj->product_company}
</label>
</fieldset>
<input itemprop="productID" content="{$obj->product_code}" type="hidden" name="product_code" value="{$obj->product_code}" />
<div align="center"><button id="{$obj->product_code}" style="background:#666666" value="{$obj->product_code}" type="submit" class="SoldOut" >Add to Cart</div>
</div>
</div>
</form>
</li>
EOT;
$imgID++;
}
echo $products_item;
Now based on the solutions, i added an image tag just before the actual image tag.I tried doing something like this
1. $('.loaderGIF').on('load',function(e){//something})
//This didn't even run
2. $('img').on('load',function(e){//something})
//I can't seem to limit this to the main image.
How do i achieve my solution, i have been trying it out for a couple of hours.
Please, let me know if you need somthing more.I will update my question.Thanks!
I couldn't find my own fix, but I found this one right here on stackoverflow and it seems good to me.
If the src is already set, then the event is firing in the cached
case, before you even get the event handler bound. To fix this, you
can loop through checking and triggering the event based off
.complete, like this:
Copy from the source in case it changes:
// ".one()" makes it work only once. Change to "on" if you need it to happen more.
$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) $(this).load();
});
When the user clicks on the image I want to replace the 'input type:image' with a 'iframe' in the same position and the same height. iv tried adding the iframe and setting the display to invisible then visible when clicked but this causes alignment issues
also tried setting display of iframe to none, which looks good at the start but then how do i get it to appear where the map previously was?
<script>
function showIframeMapOnClick() {
alert("this is a test");
$("#Image1").css('visibility', 'hidden');
$("#iFrameMap").css('visibility', 'visible');
/// $("#iFrameMap").css('visibility', 'block');
}
</script>
<div id="Contact Us" class="backimage2" style="width:100%;">
<div id="Fullcontent">
<div id="thirdPageDiv" class="wrapper whitediv">
<div>
<input type="image" ID="Image1" onclick="showIframeMapOnClick();return false" src="/images/mapImage.png" style="float:right; position:relative; width:550px" />
<iframe id="iFrameMap" src='https:' width='50%' height='400px' style="float:right; position:relative; width:550px; visibility:hidden"/*also tried display:none*/></iframe>
</div>
<div class="black-header">Contact Us</div><br />
This House,<br />
This Street,<br />
This Door,<br />
This LetterB,<br />
Please,<br />
Come Again,<br />
<br />
</div>
</div>
</div>
anyone know how to resolve this?
thanks
Give id to your div,(here its myDiv), and define height & width for it. Inside that use your image.
When user clicks button, change the content of div, thus the iframe will be shown in same position. Code shown below
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
function showIframeMapOnClick() {
$("#myDiv").html("<iframe id='iFrameMap' src='https:' width='50%' height='400px' style=''></iframe>");
}
</script>
<div id="Contact Us" class="backimage2" style="width:100%;">
<div id="Fullcontent">
<div id="thirdPageDiv" class="wrapper whitediv">
<div id="myDiv" style="float:right; position:relative; width:550px">
<input type="image" ID="Image1" onclick="showIframeMapOnClick();return false" src="/images/mapImage.png" />
</div>
<div class="black-header">Contact Us</div><br />
This House,<br />
This Street,<br />
This Door,<br />
This LetterB,<br />
Please,<br />
Come Again,<br />
<br />
</div>
</div>
</div>
I am currently using AJAX to actually make my website more dynamic. But somehow the event objects method e.preventDefault() does not fire to prevent the link to load. I have specified a container which will be replaced, now I don't know the reason for this failure. Through the .load method I am loading HTML content, to be exact the content from another 'container' in the HTML.
My index.php:
<nav>
<a class = "current" href="index.php">Home</a>
Search
</nav>
<div class="header">
<header class="title">jrr scientists - Official</header>
<img id="logo" height="100" width="160" src="Logo/dev.png">
</div>
<section id="content">
<div id="container">
<div class="img2">
<img id="ish"src="img/ish.jpg">
<img id="mit" src="img/it.png"><br>
<img width="100" height="100" id="home" src="img/toys1.jpg">
<img width="200" height ="100" src="img/This is CS50.gif"> <br><br> <br><br>
<p> This is supposed to be a small thank you to all these institutions to make </p>
<p> education accessable worldwide, even to non-college students. Therefore material </p>
<p> will be pblished here to enhance the use of this education. </p>
<p> *********************************************************************************************** </p>
<p> *********************************************************************************************** </p>
<p> From the Editor JRR - Jayant Raul Rao </p>
</div>
<div id="text">
<p> This is the official website of jrr developer and the </p>
<p> CS environment to make your life easier. This website</p>
<p> will focus on programming and computer science introducing </p>
<p> concepts, displaying offical documentations and scripts </p>
<p> from various examples. We can actually have a look at </p>
<p> Google Scholar pdf's and a lot of facts of cs, maths </p>
<p> and physics undermining the determination and will to </p>
<p> save and keep data in a way to help. This page will be </p>
<p> empowered by different features like a search engine, </p>
<p> CS50 lectures, Google Scholar texts and maths problems. </p>
<p>********************************************</p>
<p> JRR (Jayant Raul Rao) </p>
</div>
<div id="img">
<img class= "img" width="200" height="120" src="img/ibm.jpg">
<img id = "img1" width="190" height="120" src="img/term.png"> <br>
<img id="xcode"width="80" height="70" src="img/xcode.png">
</div>
</div>
</section>
<script type="text/javascript" src="JS/basis.js"></script>
<script type="text/javascript" src="JS/ajax.js"></script>
Now here I will replace the container through this jQuery script (ajax.js)
:
$('nav a').on('click', function(e) { // User clicks nav link
e.preventDefault(); // Stop loading new link
var url = this.href; // Get value of href
$('nav a.current').removeClass('current'); // Clear current indicator
$(this).addClass('current'); // New current indicator
$('#container').remove(); // Remove old content
$('#content').load(url + ' #container').hide().fadeIn('fast'); // New content
});
After this I will load this and replace the old container with the new one:
<!DOCTYPE html>
<html>
<head>
<title>Search</title>
</head>
<body>
<section id = "content">
<div id="container">
<!-- <img src="toys1.jpg" /> -->
<div id="header">
<img class="pio"alt="CS50 Search" src="img/Unknown.gif"/>
</div>
<form action="https://www.google.com/search" method="get">
<input class="t" name="q" type="text"/><br/>
<button class="u">Search</button>
</form>
</div>
</section>
<script type="text/javascript" src="JS/ajax.js"></script>
</body>
</html>
Thank you in advance
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');