I'm working on a product web page. This product page has multiple attributes such as size and color. I'm working on building an image swap script (jQuery) that will swap the main image on the page based on events.
Easy enough and there's a million tutorials how to do that.
Where this gets less trivial is the attributes. I want to be able to swap images based on the aforementioned attributes selected.
First, the page will display an image that has been set as "default" for a given product.
Second, if someone clicks "size: large", it will show the image that's set for size large.
Third, if someone clicks "color: red", it will pull the "large : red" image and swap it for the main image.
Fourth, if someone now clicks "size : small", it will fetch the "small : red" image file.
Fifth, if someone now clicks "color : blue", it will fetch the "small : blue" image file.
You get the idea.
I have a database with the size:color table. The question is, what is the best way to get this data in the HTML page so I can load it into JavaScript?
I want to avoid an AJAX call because of the extra network overhead and the page load will have already accessed the database and gathered all the data, I don't want to call the database again and have it do all that work a second time.
I could hide the data with CSS (display:none) in the liked elements, but I would be concerned with SEO. There's a bit of data to hide. There's thumbnail image URLs, standard size and large size. I certainly wouldn't want to save it as JSON format like that and just display:none.
I thought maybe saving it in HTML comments and using the jQuery comments() plug-in. I have concerns of speed and feasibility.
Any thoughts on how people best store data in the HTML file to access with JavaScript to build some nice page experience effects?
---- EDIT ----
Having slept on this, I'm thinking that I'm over thinking this whole thing. This whole time I'm trying to figure out how can I add all this product image information into HTML so JavaScript could use it add effects, when all I think I need to do is just have my PHP spit out the image/attribute table as a JavaScript object so I can use it. Instead of trying to figure out some way to re-load it from HTML. Which is just over thinking the whole thing.
You can spit out the page with a JavaScript block that contains the data for the product in JSON format.
Alternately you can get clever with class names and put the data in there: red_A12345 would parse out to red image = "A12345.jpg"
see my edited comment -
I found that creating a JS variable/object via PHP worked quite well for passing the data to JS so I could create a JS app that did the image swapping complexity as described above.
I use Zend and jQuery as PHP/JS frameworks so the code sample will reflect this. But the concept will work for any development platform:
// parse the object into Json in PHP to pass to JavaScript, using Zend_Json
$jsonSource = Zend_Json::encode($dataObject);
// parse the Json in jQuery as a JavaScript script
$script = 'var imgTable = jQuery.parseJSON(\'' . $jsonSource . '\');';
// append the script to my Zend_Framework template so it prints out
$this->view->headScript()->appendScript($script, $type);
In addition, I think I'll be looking into the practicality of doing this for building a dynamic check-box web-form that will enable/disable form options based the current inputs and if there are any results available for future options, based on current options selected.
Related
I have a simple file based with html that looks like this:
<html>
<body>
<b>Faculty</b><br><br>
Dr Mcgee
<br>
Dr Else
<br><br>
<b>Values</b><br><br>
1
<br>
2
<br>
</body>
</html>
I'm new to the web end of things, and was wondering how I could go about doing this: When the user hovers over a piece of text that's under the Faculty column of my school (I'm not gonna link my schools page because if I do someone from my school will likely create this extension). I want it to show a ratemyproff rating.
I have no idea on how to do this, because well I don't really know what to search on google to do such a thing?
I know there are CSS overlays over images like such:
https://www.w3schools.com/howto/howto_css_image_overlay.asp
But in my case, I'm not guaranteed what professors will be listed (I just want to understand the basic process of doing such things).
I don't think I can use PHP as that would require users who I want to share this eventually with to also have a php/server side thing installed. I guess I just don't know how to go about doing such a thing, and don't know what to search on the internet for it?
If the sites you are requesting data from aren't under your control you are very likely not going to be able to do this without a backend because of CORS, which basically prohibits site A from loading in data from site B. Site B would have to give you special permission. You can read about that here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
However, if you are able to access the pages, or you decide to use a backend for this, the term you are looking for is ajax.
A rough outline of what your script might look like is:
Give these school elements a classname.
Also add data attribute to these elements to store data needed to get the information you are looking for (e.g. a url or a school name or id).
In the JS, set up a trigger so that when something with that classname is hovered over, an ajax request is made to a url to get the data you are looking for.
If the ajax request is successful, show the data you want to show in a container set up on the page.
As far as setting up the container to show, it would probably be simplest to add an empty container for each listing which will then be populated with data.
If you are new to all of this, I would suggest using jQuery. You can find the ajax documentation here: http://api.jquery.com/jquery.ajax/
First Step:
Use something to get the text and store in a javascript variable when hovered over the text that is searchable,
To do this put the text in a single node like <span class="searchable">This text is searchable</span>.
You can do something like this to get node value http://jsfiddle.net/5gyRx/
Second step:
Add an empty node <div class="data"></div> aboslutely positioned inside the container div which will be used to show fetched details about that text.
Third step:
Use JavaScript/jQuery to fire an Ajax call with the text you got from the first step and populate the empty node created earlier with this data.
Is there any way to programmatically create (client or server side (PHP)) a image from a specific DIV or a complete (web) page? I'm currently creating a web-site for free coupons and the idea is when the end-user clicks on the "Print" button, the app opens a new tab/window with all the selected coupons as a single image (JPG, PNG or etc..) in A4 format ready for printing. Each coupons has it's own data (Article name, price, description etc..) so I need it to be done programmatically over a coupon-template I designed.
I do not ask you to write code for me, just to suggest a solution I could use/develop. If not already exist, I will upload/publish it for free :)
Update: I did it with the PHP GD library :) Still not satisfied with the idea to use Images instead of PDF, because each printing results with different Coupon sizes (images) on different PC's. That's why PDF may would be a better solution. You can see/test it on demo.svikuponi.ba - Just select a few Coupons and click the PRINTAJ button above.
You cannot create image from div for sure but yes you can create dynamic images in php using its gd library.
Following links will help:
http://php.net/manual/en/function.imagecreate.php
http://phptutorial.info/learn/create_images/
Here is a great way for you to create images on the client side: http://smus.com/screen-capture-for-chrome-os
You can take this and create a web app that will work nicely on webkit (for other browsers - I'll look at JS polyfills).
Did anyone mention html2canvas and/or jsfeedback ?
It create a page screenshot completely in javascript, then you can send to the server via ajax..
Obviously, CSS support lack some things.
In php, there is many image related functions like imagettftext() in GD library
for details, check this out http://php.net/manual/en/book.image.php
if GD is not enough, you can try imagick as well
for the template, you can try creating a true color handle in php from your file(image) and add the text part or something else with all kinds of effects and bar codes etc.
but in your case, i would suggest dynamic PDF creation since it would better with formatting instead of plain image, the pdf lib :
http://www.fpdf.org/
you could easily have a background image of your token/voucher and overlay the text using some php variables.
i believe it is possible to create a unique bar-code with php imaging too.
It is possible to get a screenshot from a webpage, but this is quite a hassle. You need to start a webbrowser to render the page and get a screenshot from that.
You are probably better of by parsing some specification and feeding it to a couple of GD or Imagick functions. This is less versatile, but easier to manage.
Employees need to check data imported using OCR. They have web interface showing imported data on the left side and the scanned image on the right. When dealing with a large list of items they get lost and are asking for a tool/pen able to highlight (PDF) rows that are already checked.
Is there any chance to use JavaScript and draw to the PDF that is viewed?
If you are viewing the PDF in a plug-in, the answer is no, not through JS.
If, however, you can leverage a tool like pdf.js, this may be possible, depending on what your document uses in terms of PDF elements. For example, pdf.js has an Annotation plug-in, which looks like it may enable you to actually create annotations.
You will not be able to save the changes, however. If you want to do this, you are strongly encouraged to use a proper UI and not just a PDF (though, you may read from the PDF to generate it).
What I Want: Very simply I have a C program that generates a variable periodically, I want to be able to display this value on a website.
Restrictions: The webpage is HTML, php does not work, javascript does [I have tried a few javascript solutions but they have all been long, tedious and in the end ineffective] I want it to be able to format the text so that it matches the rest of the webpage. Above all I'd really like to find something simple that works.
Freedoms: I can output the variable from my C program to just about any file type and content that I want, the file is hosted so is available locally to the server or online for the client.
Preferred Solutions: I am currently playing around with the object and iframe tags native to html. They give a nice simple input:
<object height=20 width=75 type='text/plain' border=0 data="URL/filename.txt"></object>
inserts the contents of my file, but it can't be formatted so I am stuck with 12pt Courier font which is not acceptable. Using
<iframe seamless height=20 width=75 scrolling='no' src="URL/filename.htm"></iframe>
and adding my desired font/colour/size etc to the htm file gets me the right text style, but htm has a large amount of white padding around it which I can't seem to get rid of so I have to make my iframe quite large for the text to be displayed, but then it doesn't fit smoothly with other text.
So anyone that can answer one of four questions:
How to remove excess padding from htm
How to format the style of a html object
Is there anything in Java as simple as the php [so apparently it doesn't show php code even when you quote it as code. But basically using echo and get_file_contents to insert the contents of a txt file into a html page]
Propose an alternate solution
Padding and style can be handled by css.
By java I assume you mean javascript - google-ing will help you. Without details of what your server is running and what is dispatching your pages we can't give you an exact answer. You might want something with ajax to keep it updating in the background.
Try googling your question, you'd be surprised how often this helps.
I'm not sure what you're trying to do once you get the variable into your web page, but I think something like the following could be useful.
Create a hidden div on your page
Have your C application write the variable to some file
Use jquery to execute an ajax call to pull that value into the div ( or whatever other container you want to use
using some type of timer, execute the ajax call every X period of time, which will then get your up to date variable
on your main page, have another timer that will then come in to that container, grab your value and then you are free to do what you want with it.
This is all off the top of my head without knowing much about what you're trying to accomplish. If you provide some further details we may be able to help you a little more.
You need AJAX... that's just a fancy buzz-word. It means you can tell JavaScript can get a file from the server without reloading the page and you can insert data from that file into your HTML.
AJAX is made much simpler by using a JavaScript library like jQuery, but it can be done without jQuery. There's a pretty decent Getting Started tutorial at Mozilla Developer Network if you want to do it the hard way, but I really recommend jQuery.
As far as formatting... any formatting... you need to use CSS. Just about everything about the appearance of anything on a web page is controlled by CSS. MDN has a Learn CSS section, too.
load jquery on you main html file
put a div with some id (example id="newvalue")
make you c program to write the output in a file (for example value.html)
on main html page header, after jquery include code add some javascript like
$( document ).ready(function() {
$("#newvalue").load('yoursiteurl/value.html');
});
I have been developing Android epub reader application, Using which I can Read Epubs, page by page even if it's font sizes have changed.All I need to do is to paginate html page, So That I can give a user book-like reading experience.that html page will contain images.
Currently I tried to implement it using Columising html page
using following CSS Style.
sytle="<style type=\"text/css\">body {width:"+displayWidth+"px;
height:"+displayHeight+"px;-webkit-column-gap:"+pagegap+"px;
-webkit-column-width:"+width+"px; -webkit-column-height:"
+displayHeight+"px; text-align:justify ;} </style>";
But problem with this approach is it show some images splitted ,which will be in different
columns.right and bottom of paragraph get clipped It Also have some Performance problem.
Is there is any better way to do pagination or Atleast How can I solve this splitting of image problem
Any informative links and hints all are welcome.
Thanks for your time.
Regards,
Kariyachan
If you can query the file, that you wish to take the data from, multiple times, in a way that it returns a particular set of data every time, then you might implement Paging functionality, by querying the file for a new set every time the user turns a page.