How do I use '.replaceWith' to load data from another html page? - javascript

Trying to load data from my news page in my navigation menu using .load, .find and .replaceWidth but my javascript code does not fetch the data at all. Can any developer tell me what I am doing wrong?
JAVASCRIPT FILE
jQuery('#latestnews').load('latest-news.html' + '.case a
h2:first',function(data) {
jQuery('#latestnews').find('h2').replaceWith('');
});
jQuery('#headline').load('latest-news.html' + '.case a p:first',function(data) {
jQuery('#headline').find('span').replaceWith('');
});
jQuery('#newsimg').load('latest-news.html' + '.case a
img:first',function(data) {
jQuery('#newsimg').find('img').replaceWith('');
});
HTML Navigation menu where I would like data to be fetched to.
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2><!--Where the news data would go--></h2></div>
<a href="#" id="newsimg">
<div class="fll" id="headline">
<span><!--Where the news data would go--></span>
<p class="reserved">Read The Article</p>
</div>
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="" class="flr">
</a>
</li>
</ul>
HTML Code that needs fetching from my latest-news.html and to appear in navigation menu
<div class="case newsarticle">
<a href="#" target="_blank">
<img src="assets/img/latest-news.jpg" alt="" title="" width="326" height="245">
<h2>Content Title To Appear in Navigation Menu...</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content...</p>
<span>Read More</span>
</a>
</div>
The data just doesn't appear at all. If I remove the concatenation (' + ') between the 'latest-news.html' + '.case a h2:first' I still get the same response.

I edited my javascript file to this:-
$(document).ready(function(){
jQuery('#latestnews').load('latest-news.html .case a h2:first');
jQuery('#latestnews').find('h2').replaceWith('');
});
$(document).ready(function(){
jQuery('#headline').load('latest-news.html .case a p:first');
jQuery('#headline').find('p span').replaceWith('');
});
$(document).ready(function(){
jQuery('#newsimg').load('latest-news.html .case a img:first');
jQuery('#newsimg').find('img').replaceWith('');
});
and changed my HTML file to this:-
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2></h2></div>
<a href="#">
<div class="fll">
<div id="headline">
<p><span></span></p>
<p class="reserved">Read The Article</p>
</div>
</div>
<div id="newsimg" class="flr">
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="">
</div>
</a>
</li>
</ul>
I am not sure if my Javascript is technically correct however I have managed to create the desired effect I was looking for. Removing the 'function(data)' seemed to be the key.

Related

How to show a specific div when a link is clicked and hide others?

I want to show only one div when the user clicks the links on the icon bar and hide others. When the user clicks home link of the icon bar only 'hoediv'is visible and others hidden.
My work is below please help!!
<!doctype HTML>
<head>
<div class="main-header-div">
<a id="home" href="" > Home</a>
<a id="about" href=""> About us</a>
</div>
</head>
<body>
<script>
$(function(){
$("#home").click(function(){
$("#homediv").show();
$("#aboutus").hide();
return false;
});
});
</script>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
</body>
</html>
What you need to fix?
Firstly, <head></head> only includes metadata, the rest should be in the <body></body>.
If you're not going to make use <a> anchor tags for hyperlinking, then pass the value href="JavaScript:Void(0);" (The void operator evaluates the given expression and then returns undefined) or better yet, don't use anchor tags better yet span or button.
You didn't import jquery.js in your html file.
You can make this a lot more effecient, but I'd suggest you learn some basic html from the widely available sources and then CSS, Jquery,etc.
Sources to refer:
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/jquery/default.asp
$(function() {
$("#home").click(function() {
$("#homediv").show();
$("#aboutus").hide();
});
$("#about").click(function() {
$("#homediv").hide();
$("#aboutus").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a id="home" href="JavaScript:Void(0);"> Home</a>
<a id="about" href="JavaScript:Void(0);"> About us</a>
</div>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
If you want to simplify it, you can use classes and data attributes to toggle wanted content:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a class="header-link" id="home" data-toggle="homediv" href="#" > Home</a>
<a class="header-link" id="about" data-toggle="aboutus" href="#"> About us</a>
</div>
<div class="content" id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">
This is my site.
</div>
<div class="content" id="aboutus" style="display:none;">
this is about us page
</div>
<script>
$(document).ready(function() {
$(".header-link").click(function(){
$(".content").hide();
$("#" + $(this).attr("data-toggle")).show();
});
});
</script>

Looping through ul li and using insertBefore to move image up two elements

I am learning js and jquery and have been trying to solve this litle issue I am having when trying to loop through a ul on the page and move a dom element specifically an image up two levels in my html. Here is what the html looks like:
<ul class="feedEkList">
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="imageurl.jpg" class="wp-post-image">
<p>Post Description.</p>
</div>
</div>
</li>
</ul>
There are 10 li items in my ul but for readability purpose I only included one so you can see my html structure.
My javascript seems to be adding all the images before every featured-title div giving me piles of pictures instead of the one that is associated with that li.
$(function() {
$('.wp-post-image').insertBefore($('.featured-title'));
});
So then I tried this using each but it does not seem to do anything.
$(function() {
$('.feedEkList > li > .featured-title > .post-excerpt > .wp-post-image').each(function() {
$('.wp-post-image').insertBefore($('.featured-title'));
});
});
I was thinking maybe i need to use "this" in the code somewhere but I am new to javascript and not sure how to properly use "this" with the insert before, or if "this" is even the best option.
$('this.wp-post-image').insertBefore($('this.featured-title'));
Can anyone help me figure out what I am doing wrong? It is driving me nuts!
You need to iterate each image
For each image, get his parent .slick-slide.
Prepend the image to the .slick-slide using .prepend
Optional: If you need to insertBefore .featured-title see the comment.
$('.wp-post-image').each(function() {
var $this = $(this),
parentLi = $this.parents('.slick-slide').first();
$this.prependTo(parentLi);
//$this.insertBefore(parentLi.find('.featured-title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="feedEkList">
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" class="wp-post-image" />
<p>Post Description.</p>
</div>
</div>
</li>
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" class="wp-post-image" />
<p>Post Description.</p>
</div>
</div>
</li>
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
removed the "wp-post-image" class to show how it was look before
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" />
<p>Post Description.</p>
</div>
</div>
</li>
</ul>

Fancybox works on one page, but not on another

I have one page where fancybox works,
http://interscript.pl/domy/?p=628
and another where it doesn't. Where is mistake?
http://interscript.pl/domy/?cat=4
EDIT:
<a href="http://interscript.pl/domy/wp-content/uploads/Tulips.jpg" data-title="asdfasdfas dfsad 12341234 23" data-link="" class="fancybox" rel="grupa">
<div class="wpis">
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
<div class="hover"></div>
</div>
</a>
JS: $('a.fancybox').fancybox();
You've applied fancybox to all "a tags " -> $('a.fancybox').fancybox();
But your "image" is not "a" -> http://interscript.pl/domy/?cat=4
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
insert this code in your jquery codes
$(".obszar img").fancybox();
or edit your code such this;
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>

How to change a div content

I am making a football website where there will be a navigation pane on the left. When you click on one of the tabs, it will bring up the corresponding video, hopefully through javascript. I want this to be done in the same html file, so it doesn't have to reload.
Here is the code for the navigation bar:
<div class="highlights"><a><p>MATCH HIGHLIGHTS</p></a> </div>
<a href="#"><div class="win">
<div class="match"><p>Cardiff</p></div>
<div class="score"><p>1-2</p></div>
</div></a>
<a href="#"><div class="loss">
<div class="match"><p>Everton</p></div>
<div class="score"><p>3-2</p></div>
</div></a>
<a href="#"><div class="win">
<div class="match"><p>Leeds</p></div>
<div class="score"><p>2-0</p></div>
</div></a>
<a href="#"><div class="loss">
<div class="match"><p>Hull</p></div>
<div class="score"><p>2-3</p></div>
</div></a>
and then the content will go inside this div:
<div id="content"> content goes here </div>
make function onclick on each hyperlink like this :
<a href="javascript:;" onclick="showGoals(1);"><div class="win">
<div class="match"><p>Cardiff</p></div>
<div class="score"><p>1-2</p></div>
</div></a>
function showGoals(matchId) {
$.ajax({
success : fumction (data) {
$('#content').val(data);
}
});
return false;
}
I suggest you read up on jQuery. Here's a good reference to change the HTML content, allowing you to add bold, emphasis, etc. jQuery's .html. You may also want to .text works.

how to trigger a print request to clients machine using jquery

Here in, I have nested divs..in which images generate dynamically ...this is the html code ..my problem is if i click the print button the corresponding image need to be printed.
<div id="outputTemp" style="display:none">
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="
<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage">
<img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit">
<a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit">
</a></li>
<li id="outdelete"><a href="#" onclick="deleteImg(div11)">
<img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
<li id="outfullscreen">
<a href="#">
<img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen"
title="Full Screen"></a></li>
<li id="outshare">
<img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<a href="#" class="menu_top" id="email">
<img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
<a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG"
alt="Facebook" title="Facebook"></a>
<a href="#" id="twitter">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="menu_bottom" id="save">
<img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
</div>
</div>
</li>
<li id="outprint"><a href="#">
<img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a>
</li>
</ul>
</div>
i need to print the image when i click the print button..
and also i need to print all the images by clicking all button which i need to
create later..
Javascript
$('.printMe').click(function() {
window.print();
return false;
});
does this work for me..can anyone help me with this..
You have to open new window and load only picture there. after that you trigger window.print in it.
If that is the way you are going, I would create simple page that will simplify it
Name it printImage.html, and use something like the following markup
<html>
<script>
function onload() {
var url = window.location.search.substring(1)
var img = document.getElementById('img')
img.src = url
window.print()
}
</script>
<body onload="onload()">
<img href="" id='img' />
</body>
</html>
having that you'll be able to new window for image like printImage.html?myfullpathtotheeimage.jpg
Actually 2nd option offered by #kennypu is quite simple to implement
add the following stylesheet to your page
#media print {
* { display:none; }
.print { display:block }
}
then just toggle print class to the element you are going to print.
If you want to print only the corresponding image, you have two choices.
When the button is clicked, go to a different page which contains only the image to be printed, and run window.print() there.
make a print style sheet using the media query: #media print and hide everything but the image to be printed in the stylesheet

Categories