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
Related
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.
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>
Good day Everyone,
Can you please help me out. I have a slideshow of images (3 images) with the first one displaying when the page is loaded.
I also have next and previous buttons that work 100%. But I just want to make the slideshow move automatically to the next image after a number of seconds (5 sec) and loop (return to the first image and continue cycling through each image automatically).
I apologize for the seemingly obscure class names as they have been heavily implemented into the template that I am working with. Therefore, changing them would create a list of CSS issues as well.
My HTML
<!-- START SLIDESHOW HOME -->
<section id="slideshow-home" class="wrap noo-slideshow slideshow-home">
<div class="property-slider">
<div id="noo-slider-1" class="noo-slider noo-property-slide-wrap">
<ul class="sliders">
<li class="slide-item noo-property-slide">
<img src="images/slideshow/bg-slide1.jpg" class="attachment-property-slider" alt="" />
<div class="slide-caption">
<div class="slide-caption-info">
<h3>Santa Monica, CA</h3>
</div>
</li>
<li class="slide-item noo-property-slide">
<img src="images/slideshow/bg-slide2.jpg" class="attachment-property-slider" alt="" />
<div class="slide-caption">
<div class="slide-caption-info">
<h3>Pacific Palisades, CA</h3>
</div>
</li>
<li class="slide-item noo-property-slide">
<img src="images/slideshow/bg-slide3.jpg" class="attachment-property-slider" alt="" />
<div class="slide-caption">
<div class="slide-caption-info">
<h3>Visalia, NJ 93277</h3>
</div>
</li>
</ul>
<div class="clearfix"></div>
<div id="noo-slider-1-pagination" class="slider-indicators indicators-center-bottom"></div>
<a id="noo-slider-1-prev" class="slider-control prev-btn" role="button" href="#">
<span class="slider-icon-prev"></span>
</a>
<a id="noo-slider-1-next" class="slider-control next-btn" role="button" href="#">
<span class="slider-icon-next"></span>
</a>
</div>
</div>
</section>
<!-- END SLIDESHOW HOME -->
setInterval(function(){
nextSlide(); // <-- your slide change code
}, 5000) // <-- run this every 5 seconds
But, as others have suggested you are probably much better off just using one of the thousands of slide show plugins for jQuery
You can use setInterval() function for this.This will run for every interval of specified time.
setInterval(function(){
// do what you want
// or you can use: $('#noo-slider-1-next').click();
},time_interval_in_milliseconds);
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>
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.