i am trying to do it simple and will be happy to see / hear, examples / ideas
for the right approach :
suppose i have an jpg image: width of 780px and height of 2546px
that contains coupons.
my goal is to click on a coupon and print it...
my question is what is the best way to implement it
i thought about image map the will trigger a java script call when ever specific "coupon" is clicked and through the image map specification it would load an image(of the specific) coupon for printing.
i think that maybe there is a better solution..
keep in mind that my only option is one large image that contains coupons for printing.
Wrap your coupon image in a div
<div id="coupon_viewer" onClick="this.style.display='none'">
<img src="coupon.jpg">
</div>
With this CSS
div#coupon_viewer { z-index:100; width:200px; height:300px; overflow:hidden; }
div#coupon_viewer>img { position:relative; left:0px; top:0px; }
When you click on the main coupon, simply display the viewer div and set the left and top properties to the appropriate coordinates for that coupon. You can also set the div width and height as needed. Then window.print().
If your window is initiating the print dialog before rendering the coupon_viewer layer here's how you can delay the print command, long enough for any slow browser to render the coupon layer.
setTimeout(function () { window.print(); }, 800);
After a quick search, here is a thread I found about how you can pull the coordinates when you click on the coupon. You can then multiply the coordinates by whatever factor you reduced the first image size.
jQuery get mouse position within an element
Here is a link to the overflow property spec hidden just means your div will act as a view-port while you move your image around inside it using the left and top properties:
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Good luck
i did it eventually with the use of image maps:
coordinated the 'send to print button' and send to javascript 'print()' method that accept parameter
the parameter is a number of a picture(coupon)
i have a folder that contains all the coupons images:
1.jpg, 2.jpg ..... etc'
the print method retrieve the string (1.jpg)
and then print it.
Related
I'm using Laravel PHP to retrieve images from a database and display them in a blog application that I am creating. I decided to use an 'iframe' tag so that I can retrieve and display both images and videos in the blog. The problem I'm having however is CSS related where I'm trying to style the 'iframe' so that it will adjust its size to different size images and videos and retain their aspect ratio at the same time.
Right now small images are displayed fine but if I use a large sized image, anything with a width greater than 800px, the image will not keep its aspect ratio and/or be clipped.
View (Laravel PHP Blade File):
<div class="blog_img_container">
<iframe class="blog_img_container_image" scrolling="no"
src='{{asset("uploads/photos/" . $funnyblocks_blog->blog_photo_path ) }}'
onload='javascript:resizeIframeHeight(this);
javascript:resizeIframeWidth(this);' ></iframe><br>
<p> {{ $funnyblocks_blog->blog_content}} </p>
</div>
CSS:
.blog_img_container {
float:left;
position:relative;
width:60%;
}
.blog_img_container_image {
display:block;
max-width:100%;
max-height:400px;
margin-top:20px;
overflow:auto;
}
.blog_img_container iframe {
border:none;
}
I also tried using some Javascript that I called in the 'onload' within the 'iframe' element but its still not producing the desired result.
Javascript:
function resizeIframeHeight(obj) {
obj.style.height= obj.contentWindow.document.body.scrollHeight + 'px';
}
function resizeIframeWidth(obj) {
obj.style.width= obj.contentWindow.document.body.scrollWidth + 'px';
}
I don't really know if this is the correct approach I should use for dynamically retrieving and displaying both images and videos within a single element (In this case the 'iframe' tag). Any help is greatly appreciated!
I'd recommend using a combination of CSS3 object-fit and a JS object-fit polyfill like this and a JS iFrame resizing utility like this.
The object-fit property will resize your image to fit/cover the bounds of your iframe (without changing the aspect ratio) when the iframe is constrained by its container and the iframe resize will resize the iframe to be the size of the image when the image is smaller than the bounds of the iframe container.
Integrating these two utilities won't be trivial since they both alter the markup of the page in ways that could influence the outcome of the other plugin. I have done very similar integrations before however and been successful.
I'm a designer, but I also do some programming (javascript, html, css). I need to create a custom timeline for a website (Couldn't post a photo because of insufficient reputation on here, but here's a link to the design: http://postimg.org/image/5p92wkk8f/ Like you hover the mouse over a part of the timeline, and according to that the year changes) But I have no idea where to begin. (I tried looking it up on the internet, but there's no timeline code examples and I don't wanna generate a timeline from other websites, I wanna make a custom one that would be exactly like this design). Would anyone be able to give me hints, say anything useful, tell me where to start? Thanks!
Timeline JS is may be exactly what you are looking for. As it's open source tool, you can modify it as per your needs.
I'd make many divisions, one for each part (year in this case) of the timeline. So there'll be about 20 divs that together make the whole white line.
CSS would be something like:
.timeline { /*"timeline" is a class name that I made up.*/
background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/
height: 30px; /*estimation*/
width: 30px; /*estimation*/
position:absolute;
}
.timeline:hover {
background-color:#000000; /* This is black color, change it to the brownish background color.*/
}
This is just a part of the CSS. You'll need to position each division with margins. With the CSS code done, you'll have the timeline change it's color for each div you hover on.
The harder part is actually changing the text, and for it we'll use javascript. In order to make the code not too long (and easier for me to write) I'm going to write it as if there were only 2 divisions in the timeline. Once you get what I do, you will be able to finish it off easily.
So first of all, add an id to the division in which the text is, "text" e.g. In html, add to the 2 timeline divisions the event onmouseover, then a function. The functions are numbered.
<div id="text">Here is some text</div>
<div class="timeline" onmouseover="changeText1()"></div>
<div class="timeline" onmouseover="changeText2()"></div>
Now we need to write the functions. We'll make a variable which will include the whole "text" id, then make 2 functions (one for each div) and make each function change the text according to the function's number.
var text_div=document.getElementById("text");
function changeText1()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline.
}
function changeText2()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline.
}
So let's review. The CSS makes the division change color when hovered on. Additionally, when a division of the timeline is hovered, it will trigger a function from the javascript code which will change the text, according to which division was hovered on.
Another thing you should notice: In the image you added, there isn't one paragraph only, for each paragraph a different CSS code. The javascript code I wrote will change the whole "text" division, making it's CSS be the affecting one for the whole text you entered in javascript ("Some Text" part). If you wish the CSS to stay different, you should:
make for each paragraph its own id (in html).
then make a new variable in javascript for each id.
and then add a new line to each function, which will change the inner HTML of the new paragraph separately.
If something is unclear, please ask.
The pop up image for "ice white" and "violet" pop up in different places. How do I make them both pop up in just one position?
Could you perhaps define a single div that uses absolute position and then on hover over Violet or Ice White, draw the popup image inside that div you created?
So something like:
var displayDiv = document.getElementById("displayDivID");
// draw popup image in the div
displayDiv.innerHTML = "<div id=\"violet\">...</div>";
displayDiv.style.display = "block"; // to show it
That way, whenever you need to display an image in the same position, it's always drawn inside that div you specified.
I would assume you have a class that controls the formatting of that div like position and borders etc.
EDIT
I've taken your code from your site and added some more code.
Save this code as a html page onto your computer and try it.
Look for the last css code snippet right before the closing tag. That block of css there controls the look of the div and position it in the middle of the page. The css only sets a fixed position. You could alternatively, use javascript to dynamically calculate the width and height of the user's browser window, then render the css code accordingly so the div is always in the middle of the browser regardless of the inner image dimension.
In your previous javascript code snippet for the displayDiv, I've fixed up a few things and added two functions for when the mouse is over a thumbnail and when it's out of a thumbnail. On mouse over will pass the url of the image to the function that will be used to render an image into the displayDiv.
Hope that helps.
EDIT 2 - Fade In and Out
You certainly can.
All you need to do is change the two functions to use jQuery fadeIn() and fadeOut() like so:
function changeDisplay(bgImageURL)
{
var displayDiv = document.getElementById("displayDiv");
// draw popup image in the div
displayDiv.innerHTML =
'<a class="popup1" href="#v"><img src="' + bgImageURL+ '" alt="" /></a>';
// show the display in case it was hidden before
$('#displayDiv').fadeIn();
}
function hideDisplay()
{
// hide it when the mouse rolls off the thumbnail
$('#displayDiv').fadeOut();
}
This jQuery is a basic one. It will have a problem where if you move your mouse on and off the thumbnail quickly, it causes the display div to come on and off, on and off, on and off even if your mouse is already off the thumbnail.
The proper way would be to rework the code and use mouseEnter and mouseLeave on the thubmnail elements.
edit: I don't want to just take content from different pages and load it into the current page. What I really want to do is load different html files that will be interactive within the television. I have found that it is difficult to do this because you can't load html files into DIV's and you can't click on links through a transparent png file.
Hello,
I am building a website for a tv show that my friends and I make called Every Single Day.
here you can see the mock up of what I have so far:
http://www.uvm.edu/~areid/cs195/final/S/S.html
as of right now, the image I am using is just one big image that I sliced up with Photoshop.
What my goal is, is to use some sort of script to make it so the outside television will stay in place statically and the web-content within the television will transition without reloading the outer-most television.
I wanted to combine this technique with something similar to the fss slider script to allow each page on the site to slide, making it look like it is a continuation of the room. -Perhaps this isn't even the best way to achieve my desired result.
I have all of my images drawn and sliced, all I need now is some direction in what exactly to search for to find the pieces I am looking for.
Thank you very much, I am pleased to have joined this community,
cooper reid
Edit 5: http://jsfiddle.net/wdm954/pqAJK/10/ (Shows addition content.)
Edit 4: http://jsfiddle.net/wdm954/pqAJK/7/
This demo includes panning to specific frames.
var h = $('.clickable div').height(); //height of a single content DIV
var divCount = 0;
$('.clickable div').each(function() { divCount++; }); //count number of content DIVs
$('.pan').click(function(e) {
e.preventDefault(); //prevent default action (of <a>)
if ($('.content div').is(':animated')) return false; //disable click while animating
var x = $(this).attr('href'); x = $(x).index(); //get index of destination element
$('.content div').animate({top: -x*h +'px'}, 2000); //animate to destination
});
$('#tv-right').click(function() {
if ($('.content div').is(':animated')) return false; //disable click while animating
$('.content div').animate({top: '-='+h+'px'}, 2000); //animation
//if last div then go back to the start
if ($('.content div:last').css('top') == (-h * (divCount - 1)) +"px") {
$('.content div').stop().animate({ top: '0px' }, 1000);
}
});
Edit 3: http://jsfiddle.net/wdm954/pqAJK/5/
Ok, check this demo out. Clicking on the right side of the TV (where you may put some buttons) will scroll the content in the screen. When you reach the last content section, the next click will return to the first content section. I layered the content so the background divs scroll behind the TV image and the content scrolls above (so you can click on it. There are a few other tricks thrown in but look it over and you should get the idea.
Edit 2: http://jsfiddle.net/wdm954/pqAJK/3/ (Click the TV to see the transition. This has content divs instead of just a background image).
Edit: Check out this demo: http://jsfiddle.net/wdm954/pqAJK/
I would first cut out the screen part of the TV and save it has a .png with transparency so you can see what is behind the screen portion of the TV.
Then you can add a background image and animate that with jQuery to slide into view the portion you would like to display.
I *personally wouldn't use any slices, kind of an old school technique for when most people didn't have high speed connections.
Wrap everything inside the outer television in a <div>
Create seperate HTML pages that just has the HTML of the content that you want inside the television.
Use jQuery's AJAX get method to get the HTML for the page without refreshing it.
e.g. Your "single" image is in a <td> with ID "rightframe". So when rightframe is clicked, you might want to get the html of a page called single.html and put that inside the television (let's assume your <div> or <table> that has the code has ID content):
$('#rightframe').click(function() {
$.get('single.html', function(data) {
$('#content').html(data);
});
});
Edit: For the sliding part, you would have to create two separate tables/divs side by side, one for the current page, and one for the page that is being loaded. Then you could use a jQuery plugin like Slidy http://www.wbotelhos.com/slidy/ to transition between them.
Personally I think it would be much cooler if you could put an animated GIF of TV white noise on the television while the page is loading :)
Something along the following: http://jsfiddle.net/Vzdu7/
On the homepage of my website - www.mobiuspc.com, I have some distinct sections that I color coded so I could see how its all laid out. There is the master page section, which works just fine (its the tan bar with buttons like "Components" and such), and at that level and up everything works as best as I could wish for.
Down below I have some issues. There are 3 primary DIV's that I use to break down the page:
<div id="mainarea" runat="server" >
This is anything in between the header/master page area, and the yellow color coded area. This big area is supposed to be 700px high, and 1024px wide, and is colored silver. If you go to the site, you will see that it is not. There is a panel with a repeating hard drive image, that is my drop zone for Drag 'n drop functionality (unrelated to this question). I have it set to runat server, because if I don't do that, then Drag 'n Drop seems to break.
<div id="categorybar">
This is the yellow color coded area that holds all my buttons. I'm happy with it. Hit the button called "Display" and watch what happens to the DIV above it. It goes way out of bounds! My CSS to set its width and height seem to be overruled.
<div id="detailbox">
This is the blue colored area, no issues here. Eventually I will put controls in here, but for now it is fine being blue.
The initial thought might be that my CSS is borked. If this is the case, I can't see where! I've set the height/width and all that good stuff. I've tried added the float:left into random sections, to no effect. Here is the relevant excerpts from my CSS file"
#mainarea
{
background-color:Silver;
height:700px;
width:1024px;
}
#categorybar
{
background-color:Yellow;
height:80px;
width:1024px;
}
#detailbox
{
background-color:Blue;
height:420px;
width:1024px;
}
I create objects at run time when you click the "Display" button, and all those objects are added to a pane that resides in the #mainarea DIV. That pane is known as toolbox, and here are it's CSS properties:
#toolboxpanel
{
height:700px;
width:324px;
max-height:700px;
max-width:324px;
overflow:scroll;
}
For some reason it keeps expanding beyond its predefined size when I add controls at runtime instead of simply having a scrollbar like I would prefer. The panel with all the hard drive pictures as the drop zone, that is also in the #mainarea DIV, and here is the CSS in case its relevant:
#droppanel
{
height:700px;
width:700px;
margin-top:-700px;
margin-left:324px;
}
Should I get rid of the runat=server bit? If I do that and click on the display button, I still get that horrid panel expanding itself all the way to the bottom of the page, but at least the silver colored #mainarea DIV stays the proper size (the panel just gets out of control). If I go that route, any idea why it breaks my drag and drop? I hope I don't have to go that route, and instead there is simply something goofy in my CSS that I'm overlooking...
Thanks for your help!
Bill
runat="server" will change the client id of the control you are using it on meaning your #mainarea css will not apply.
You could get around this by assigning mainarea a css class and using that to apply styles rather than its id.