Showing posts with label cross-browser. Show all posts
Showing posts with label cross-browser. Show all posts

Monday, November 14, 2022

[FIXED] How to correctly load a stylesheet within the body?

      , , , ,      No comments   

Issue

I know I can just put the <link> tag in the body and apparently it works, but I know it's not "valid" html and I want to avoid issues with strict browsers like firefox, which ignore every behavior a web designer expects if it's not defined in the official specification.

So is there some official way to load a stylesheet in the body area of the html?


Solution

You can add your css in the head dynamically as well like below:

jsCode:

var head = document.getElementsByTagName("head")[0],
    cssLink = document.createElement("link");

cssLink.href = "path/to/filenam.css";
cssLink.id="dynamic-css";
cssLink.media="screen";
cssLink.type="text/css";

head.appendChild(cssLink);


Answered By - Ashish Panchal
Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Tuesday, September 13, 2022

[FIXED] How to access Cookies cross-device/cross-browser?

      , ,      No comments   

Issue

Lets say a user opens website with utm from a third-party ios app with webview - instagramm, facebook.

E.g. example.com?utm_source=facebook&utm_medium=banner&utm_campaign=advertisement1

Javascript on example.com creates a cookie with those campaign details. How can you see those campaign details if a user visits a website from a different device or browser?


Solution

It turned out cookies are saved locally, and cannot be accessed from another device, unless you save them to a database and assign to a user, when he makes an authorization.

So basically if you want to keep cookies cross-device/cross-browser for a user, you should sync them with your user data in database.



Answered By - Sam Tyurenkov
Answer Checked By - Marie Seifert (PHPFixing Admin)

Monday, July 18, 2022

[FIXED] How to find page width in Opera 12 (for Desktop Windows)?

      , , , ,      No comments   

Issue

I want to access full page width & height in Opera. Note I am not asking about Viewport's height or width, I want page's/document's width & height. I am using Opera 12.12

I have tried the following:

  1. document.body.scrollWidth/Height
  2. document.body.offsetWidth/Height
  3. window.innerWidth/Height
  4. document.body.clientWidth/Height

And all of them gives viewport's width/height.

Please use the following link: http://jsfiddle.net/RQhYR/

Or use the following HTML Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
    <div style="width:2000px;height:2000px;background-color: blue;"></div>
</body>
<script type="text/javascript">
    alert(window.outerWidth + "," + window.outerHeight);
</script>
</html>

Solution

I'm getting the correct values from body.offsetWidth/Height, body.scrollWidth/Height and body.clientWidth/Height (using the same build as you). Only window.innerWidth/Height is supposed to return browser window viewport.

Maybe you've got some odd CSS that sets the dimensions of the body to the viewport and puts the scrollbar on an element somewhere inside. In your case, I'm getting the expected values of 2000 x 2000 px from the scrollWidth/Height of the <html>, see demo.



Answered By - Bergi
Answer Checked By - Gilberto Lyons (PHPFixing Admin)

Thursday, May 5, 2022

[FIXED] How to compress an image via Javascript in the browser?

      , , ,      No comments   

Issue

TL;DR;

Is there a way to compress an image (mostly jpeg, png and gif) directly browser-side, before uploading it ? I'm pretty sure JavaScript can do this, but I can't find a way to achieve it.


Here's the full scenario I would like to implement:

  • the user goes to my website, and choose an image via an input type="file" element,
  • this image is retrieved via JavaScript, we do some verification such as correct file format, maximum file size etc,
  • if every thing is OK, a preview of the image is displayed on the page,
  • the user can do some basic operations such as rotate the image by 90°/-90°, crop it following a pre-defined ratio, etc, or the user can upload another image and return to step 1,
  • when the user is satisfied, the edited image is then compressed and "saved" locally (not saved to a file, but in the browser memory/page),-
  • the user fill a form with data like name, age etc,
  • the user click on the "Finish" button, then the form containing datas + compressed image is sent to the server (without AJAX),

The full process up to the last step should be done client side, and should be compatible on latest Chrome and Firefox, Safari 5+ and IE 8+. If possible, only JavaScript should be used (but I'm pretty sure this is not possible).

I've not code anything right now, but I've thought about it already. File reading locally is possible via File API, image previewing and editing could be done using Canvas element, but I can't find a way to do the image compression part.

According to html5please.com and caniuse.com, supporting those browser is quite hard (thanks to IE), but could be done using polyfill such as FlashCanvas and FileReader.

Actually, the goal is to reduce file size, so I see image compression as a solution. But, I know that uploaded images are going to be displayed on my website, every time at the same place, and I know the dimension of this display area (eg. 200x400). So, I could resize the image to fit those dimensions, thus reducing file size. I have no idea what would be the compression ratio for this technique.

What do you think ? Do you have any advice to tell me ? Do you know any way to compress an image browser-side in JavaScript ? Thanks for your replies.


Solution

In short:

  • Read the files using the HTML5 FileReader API with .readAsArrayBuffer
  • Create a Blob with the file data and get its url with window.URL.createObjectURL(blob)
  • Create new Image element and set it's src to the file blob url
  • Send the image to the canvas. The canvas size is set to desired output size
  • Get the scaled-down data back from canvas via canvas.toDataURL("image/jpeg",0.7) (set your own output format and quality)
  • Attach new hidden inputs to the original form and transfer the dataURI images basically as normal text
  • On backend, read the dataURI, decode from Base64, and save it

Source: code.



Answered By - psychowood
Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Sunday, January 9, 2022

[FIXED] Stupid error: Failed to load resource: net::ERR_CACHE_MISS

      , , , ,      No comments   

Issue

I'm developing Web app in Yii framework. I need use AJAX in my some pages. So, when I clicked the button (which I loaded them with AJAX the Google Chrome Developer Tools browser says me:

Failed to load resource: net::ERR_CACHE_MISS

How to solve this problem?

P.S: I know it's duplicate question, but I couldn't find the solution for my problem. In some posts users said use Ctrl+Shift+N and try it. it will works. and/or somebody said: reload pages with Ctrl+F5 because Google Chrome likes cache everything.. So, I read all of these topics and applied all solution tips. But there were not help. Please help me...

And also in other browsers some pages not working properly. But only the Google Chrome Developer Tools returns me the stupid error.

Best.


Solution

Google declares that this is not a failure, but some "misleading error reports". This bug will be fixed in version 40 of chrome.

You can read this:

Chromium forum
Chromium forum
Patch



Answered By - Emanuele Greco

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...