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
Related
I have started some blogs using Weebly now I want to do several changes to the blog UI, everything went well until I wanted to do this. I wanted to get the image path from the image inside blog-content and set it on the blog-post-image. In my head, this jquery looks logical, but somewhere error lays.
Few things to care about, I should use each because there are many of the blog posts and I cannot use ids because of the same reason, cannot use the same id multiple times.
HTML:
$('.blog-post-image').each(function() {
var $me = $(this);
var blogPostImage = $me.siblings('.blog-content').children('img').attr('src');
$me.attr('src', blogPostImage);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
.blog-post-image doesn't have any siblings. Siblings are immediate children of the same parent element, but there are no other elements in the div containing <img class="blog-post-image" />.
You need to go up to the .blog-header to get its sibling.
Also, instead of using .each(), you can use a function in .attr(). It automatically loops, and assigns the return value to the attribute.
$('.blog-post-image').attr('src', function() {
return $(this).closest('.blog-header').siblings('.blog-content').find('img').attr('src');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
Two things:
1.) .blog-content is not a sibling of .blog-post-image
2.) .children() only looks one level deep to find the element you are looking for.
What you need to do is traverse upwards to find a sibling of .blog-content and then use the .find() function to do a deep search of the given DOM node to find what you're looking for.
$('.blog-post-image').each(function() {
var me = $(this);
var blogPostImage = me.parent().parent().parent().siblings('.blog-content').find('img').attr('src');
me.attr('src', blogPostImage);
});
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">15/6/2021</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
</div>
</div>
</body>
I am trying to change an image using jquery upon clicking. So when I click on an image it appears on the viewport then I click on another image above it and it changes to that image and then a third. When I try it only clicks on one image.
HTML CODE:
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<p><img src="mountain.jpg" alt="Mountain Vacation"><br /><br /></p>
<p><img src="desert.jpg" alt="Desert Vacation"><br /><br /></p>
<p><img src="ocean.jpg" alt="Ocean Vacation"><br /><br /></p>
</div>
<div id="bigimage">
<img id="currentimage" src="ocean.jpg" alt="ocean vacation">
<p id="imagedesc"></p>
</div>
jQuery Code:
$("#vacationimages", "src").click(function(){
$("#firstname").text("");
$("#bigimage").show("slow");
var myfirst = $("#firstname").val();
$("#currentimage").attr("src", "ocean.jpg");
$("#currentimage").attr("src", "desert.jpg");
Only the 2nd image displays despite me having different images on the same page.
Use "on" vs. "click" because it will then work for dynamically added elements, and save you headaches later. After that it's simply populating the image properties with those you gathered from the clicked image or $(this) in the scope of your function.
$(function() {
$("#vacationimages img").on("click", function() {
$("#currentimage").attr("src", $(this).attr("src"));
$("#imagedesc").html($(this).attr("alt"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<img src="http://fillmurray.com/30/30.jpg" alt="Mountain Vacation">
<img src="http://fillmurray.com/32/32.jpg" alt="Desert Vacation">
<img src="http://fillmurray.com/34/34.jpg" alt="Ocean Vacation">
</div>
<div id="bigimage">
<img id="currentimage" src="" alt="">
<p id="imagedesc"></p>
</div>
Another common approach in a scenario like this is to use an anchor tag around the img (<a>) and populate it's rel attribute with a larger source image, if what you're going for is click a thumbnail to view a larger image. In that case you bind the event listener to the anchor (not the image) and change the src to the anchor's rel (as opposed to the src of the img inside the anchor).
$("#vacationimages img").on("click",function(){
$("#bigimage img").attr("src",$(this).attr("src"));
$("#bigimage p").text($(this).attr("alt"));
});
$("#submitme").on("click",function(){
$("#mymessage").text($("#name").val()+" You want a "+$("#imagedesc").text());
});
img
{
height:32px;
width:32px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<label>Name:<input type="text" id="name"></label><br><br>
<img src="https://image.flaticon.com/icons/png/128/181/181549.png" alt="Mountain Vacation"><img src="https://image.flaticon.com/icons/png/128/148/148766.png" alt="Desert Vacation">
<img src="https://image.flaticon.com/icons/png/128/138/138662.png" alt="Ocean Vacation">
</div>
<div id="bigimage">
<img id="currentimage" src="ocean.jpg" alt="ocean vacation">
<p id="imagedesc"></p>
</div>
<br><br>
<div id="submitdiv"> <input id="submitme" type="button" value="Submit ME"> <p id="mymessage"></p> </div>
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.
I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>
I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.
I have a Javascript Accordiong, currently it displays the first dd when page is loaded, then when you click on a dt tag, the dd that is open should close and the dd tag within the dt clicked show slidedown.
However atm the first dd is shown on load, the open dd closes when another dt is clicked, but the next dd doesnt show.
Can someone please help me :/
My JS:
//Accordion - Hides open, and opens the clicked
$(document).ready(function() {
$('dd:not(:first)').hide(); //hides all but the first dd (the content under the headings)
$('dt').click(function() {
$('dd').slideUp('slow'); //slides up current dd
$(this).parent('dt').next('dd').slideDown('slow');
});
});
This is my html:
<!DOCTYPE HTML>
<html>
<head>
<title>Hobbies</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jscript.js"></script>
<link rel="stylesheet" href="style\main.css" media="screen" />
</head>
<body>
<div id="container">
<a name="top"></a>
<div>
<ul class="menu">
<li>Home</li>
<li>Schedule</li>
<li>Resume</li>
<li>Contact</li>
<li>Hobbies
<ul>
<li>University</li>
<li>Gaming</li>
<li>Chess</li>
<li>Golf</li>
<li>Harmonica</li>
</ul>
</li>
<li>Images</li>
</ul>
</div>
<div id="contenthobby">
<div>
<dt><a name="uni"><h2>University</h2></a></dt>
<dd>
<div class="pa">
<p> content
</div>
<div class="pic">
<img src="http://physics.uq.edu.au/ap/cosmicflow/wp-content/uploads/2011/11/uq_logo.gif"
alt="Error Loading Image">
<p>This is the UQ logo</p>
<img src="http://maps.googleapis.com/maps/api/staticmap?center=-27.497899,153.013222&zoom=16&size=250x250&markers=-27.497899,153.013222&sensor=false" alt="The University of Queensland"/>
<p>This is UQ</p>
</div>
Return to Top
</dd>
</div>
<div>
<dt><a name="games"><h2>Gaming</h2></a></dt>
<dd>
<div class="pa">
<p>I love to play games, even though it wastes so much time and amounts to nothing.
It allows me to just go into another world. Something amazing when your slaying dragons
haha.</p>
<p>SKYRIM!</p>
<p>What I Like About it</p>
<ol>
<li>Able to immerse yourself into the game</li>
<li>Gets the adrenalin pumping when your in an intense fight</li>
<li>Allows for late night fun</li>
</ol>
</div>
<div class="pic">
<img src="http://www.darylh.com/images/articleimages/SkyrimLogo.png"
alt="Error loading image: http://www.darylh.com/images/articleimages/SkyrimLogo.png">
<p>This is the game logo for skyrim</p>
<iframe width="320" height="240" src="http://www.youtube.com/embed/ARaOOKafLEw"></iframe>
<p>This is a video of the fun shout in skyrim.</p>
</div>
Return to Top
</dd>
</div>
<div>
<dt><a name="chess"><h2>Chess</h2></a></dt>
<dd>
<div class="pa">
<p> I love playing chess. It is a good way to unwind, will keeping your mind
sharp. It allows you to hone your skills and adapt your way of thinking.</p>
<p>Chess is a game played by men and boys alike, and this is why i believe
it is essential to a persons growth. Hence why I play it.</p>
<p>What I Like About it</p>
<ol>
<li>Sharpens your mind</li>
<li>Fun to work out the problem and beat your opponenet</li>
<li>Gives you a clearer outlook on the world</li>
</ol>
</div>
<div class="pic">
<img src="http://www.graemeanthonypewter.com.au/uploads/image/Armageddon-Chess-Set-2.jpg" alt="chess" height="250" width="250">
<p>This is an example of a chess set</p>
<img src="http://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif" alt="chess board" width="250" height="250">
<p>This is a chess move, used by pros</p>
</div>
Return to Top
</dd>
</div>
<div>
<dt><a name="golf"><h2>Golf</h2></a></dt>
<dd>
<div class="pa">
<p>The sport of golf is one of majesty and finesse. It allows one to realise
that one cannot focus on where he is, but where he is going, and how he is
going to get there!</p>
<p>What I Like About It</p>
<ol>
<li>Its outdoors</li>
<li>Is fun to play</li>
<li>Get to drive around in the golf cart</li>
</ol>
</div>
<div class="pic">
<img width="250" height="250" src="http://www.ashlargolfclub.com.au/upload/wysiwyg/whatsonIndex/Copy%20of%20Copy%20of%20Golf-Ball-and-Tee.jpg" alt="Golf ball">
<p>This is a golf ball</p>
<iframe width="250" height="200" src="http://maps.google.com.au/maps?q=54.909901,25.311652&num=1&t=h&hl=en&ie=UTF8&z=14&ll=54.91103,25.312715&output=embed"></iframe><br /><small>View Larger Map</small>
<p>This is my favourite golf course</p>
</div>
Return to Top
</dd>
</div>
<div>
<dt><a name="music"><h2>Harmonica</h2></a></dt>
<dd>
<div class="pa">
<p>I Love playing the harmonica, it allows me to just release my feelings
through music.</p>
<p>It also allows me to learn control, in how to release air, and adjust my
mouth to get the perfect pitch and sound</p>
<p>What I like About It</p>
<ol>
<li>Its a musically instrument</li>
<li>It has soul</li>
<li>It allows me to unwind after a hard day of work</li>
</ol>
</div>
<div class="pic">
<img width="250" height="250" src="http://www.harmonicagame.com/help/harmonica_tab_screen.gif" alt="Harmonica">
<p>These are the chords of a harmonica</p>
<img width="250" height="250" src="http://www.hoerl.com/Graphics/music_harm_hold.gif" alt="Proper way to hold">
<p>How to Hold a Harmonica</p>
</div>
Return to Top
</dd>
</div>
</div>
<footer class="footer">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</footer>
</div>
</body>
</html>
Working demo http://jsfiddle.net/UL3V3/1/
Good read: API : http://api.jquery.com/visible-selector/
slideToggle http://api.jquery.com/?ns0=1&s=slideToggle&go=
Using this you can close the open dd as well.
Rest you can play around and find out the behavior.
This will help. B-)
Jquery code
$(document).ready(function() {
$('dd:not(:first)').hide(); //hides all but the first dd (the content under the headings)
$('dt').click(function() {
if ($(this).next('dd').is(":hidden"))
$('dd').slideUp('slow');//slides up current dd
$(this).next('dd').slideToggle('slow');
});
});
$(this) in your case is the 'dt' so you need to find the next element ('dd'):
$('dt').click(function() {
if ($(this).next().is(":hidden")){
$('dd:visible').slideUp('slow'); //slides up current dd
$(this).next().slideDown('slow');
}
});
EDIT also added a condition to only animate the slide if the current dd is hidden.