I'm testing the WPEWebkit with arabic website and I have an issue with some website and I don't know what's wrong.
This one won't render the font (rectangles) : https://www3.nhk.or.jp/nhkworld/ar/news/
this jsfiddle neither : https://jsfiddle.net/samoud/qa3cfjdf/6/
or this one (with google fonts) : https://jsfiddle.net/samoud/qa3cfjdf/7/
CSS
#import url('https://fonts.googleapis.com/css?family=Amiri');
.arabic {
font-family: 'Amiri', serif;
}
HTML
<div class="arabic">
قصة رجل يعثر على والديه بعد رحلة بحث دامت 74 عاما
</div>
BUT this one will render as expected : http://www.aljazeera.net/portal
Do you have any idea please ?
Related
I need to export a web page as pdf it's html content that I display in the browser, I want to give the user the capability to download it as pdf, I tried jsPDF but it doesn't support arabic
I need pdf not word, and I need to do it in the client side. please help
Thanks in advance,
Demo: http://jsfiddle.net/kumarrishikesh12/rwdL0rxh/
<script async src="//jsfiddle.net/kumarrishikesh12/rwdL0rxh/embed/"></script>
OR
function doit(){
if (!window.print){
alert("You need NS4.x to use this print button!")
return
}
window.print()
}
color:#C03;
font-size:18px; font-family:"Courier New", Courier, monospace;
}
p{ font-family:"Comic Sans MS", cursive;
font-size:15px; color:#066; text-align:justify;}
a{
text-decoration:none;
font-size:20px; }
<body>
<div style="float:right;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- sidebar300X600 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-1456458421931279"
data-ad-slot="1562820743"></ins>
</div>
<div style="width:500px; height:600px; border:2px #093 dashed; margin:0 auto; padding:10px;">
<h2>What is PHP?</h2>
<p>PHP is a server side scripting language commonly used for web applications</p>
<h2>How to include a file to a php page?</h2>
<p>we can include a file using "include() " or "require()" function with as its parameter..</p>
<h2>What's the difference between include and require?</h2>
<p>If the file is not found by require(), it will cause a fatal error and halt the execution of the script. If the file is not found by include(), a warning will be issued, but execution will continue.</p>
<h2>What Is a Session?</h2>
<p>It can be used to store information on the server for future use</p>
<h2>How to set cookies in PHP?</h2>
<p>Cookies are often used to track user information Syntax: Setcookie(name, value, expire, path, domain); eg:Setcookie("sample", "ram", time()+3600);</p>
<div align="center"><img align="middle" border="0" src="http://demos.2my4edge.com/2my4edge-print-page/icon-48-print.png" /> Click here to Print the Page</div>
</div>
</body>
I have an issue that i'm not able to solve yet and I'd be really glad if someone could help ! I want to set a scroll effect (that reverse scroll) on a div which contains few images. To be more precise, images are randomly positionned into a div (scroller) with a huge height, this div is also inserted in another div (wrapper = to hide scrollbars). I'd like to make the bottom of this long div on top of screen (with a bit offset inside) and then allow user to scroll into this div. Images should slide down to bottom of screen gradually while scrolling. The user can scroll from the bottom to the top of the div, making images disappear one after the other. I make some screenshots of the expected effect. I tried some 'parallax scrolling' codes but I can't make it work, and I'm not sure that's the best solution for what I'm looking for (I only found background-image examples).
Here's the related piece of code :
------
HTML :
------
<div id="scroller-wrapper">
<div id="scroller">
<div id="img-defile1" class="img-defile">
<img src="img/image.jpg"/>
</div>
...
<div id="img-defile20" class="img-defile">
<img src="img/image20.jpg"/>
</div>
</div>
</div>
------
CSS :
------
#scroller-wrapper {
top:0;
width:102vw;
height:100%;
position:absolute;
overflow-y:scroll;
overflow-x:hidden;
}
#scroller {
top:-600vw;
left:0;
max-width:100%;
width:60%;
height:1250%;
position:relative;
z-index:800;
}
.img-defile {
display:block;
max-width:100%;
height:auto;
position:absolute;
overflow:hidden;
}
.img-defile img {
width:600px;
}
.custom-scroll {
height: calc(80% - 20px);
}
-----------
JS/Jquery :
-----------
$('#scroller').scroll(function () {
if ($(this).scrollTop() > 0) {
$('#scroller').addClass("custom-scroll");
} else {
$('#scroller').removeClass("custom-scroll");
}
});
$('.img-defile').each(function(i) {
$pT=$("#scroller").height();
$pL=$("#scroller").width();
$(this).css({
top:Math.floor(Math.random()*$pT),
left:Math.round(Math.random()*$pL)
});
});
Thank you in advance for your answer(s) !
I also asked this question on the french Alsacréation platform and Tris TOON helped me to solve this out. Please follow this link to see his demonstration. It was quite simple to apply and concerns only the CSS part. In my case, I only had to add 'transform: scale(1, -1);' on my wrapper and scroller to get the intended effect.
So a word to the wise !
Many thanks anyway and see you soon :)
my IE8 doesn't show images inner the figure tag.
TYPO3 Installation 6.1.x
DOCTYPE HTML5
css styled content (latest)
Frontend: Text & Image will shown as
<div class="csc-textpic-imagewrap">
<div class="csc-textpic-center-outer">
<div class="csc-textpic-center-inner">
<figure class="csc-textpic-image csc-textpic-last">
<img height="308" width="828" alt="" src="fileadmin/media/image.JPG">
</figure>
</div>
</div>
</div>
I 've included HTML5shiv Script - nothing happens .. then I tries to unwrap the figure element with jQuery - nothing happens
Has anyone an idea how I can show my image wrapped with
it was a responsive big
img {
max-width: auto;
width: 100%;
/* and for IE 8 */
width: auto\9;
}
That's it Damn.!
I had the same problem:
tt_content.image.20.rendering.singleNoCaption.singleStdWrap.wrap.override >
tt_content.image.20.rendering.noCaption.singleStdWrap.wrap.override >
Or instead of deleting it, replace it with whatever html you like.
just set this in config typoscript
doctype = html5
I am trying to get the effect shown here https://www.kogevitamins.com/
Where you hover over the "learn more" link to get the opacity of the image to also change.
Thanks.
Edit:
Right now I have
for HTML
<img src="/images/pill.png" alt="description" id ="image" />
<p> Daily Essentials </p>
<a id ="button" href="#">Learn More</a>
For jquery
$("#button").hover(function(){
$("#image").animate({opacity:1},300);
}).mouseout(function(){
$("#image").animate({opacity:0.6},300);;
});
It doesn't seem to work so far
Edit:
I have the following code recently updated but the hover on effect doesn't work for me. Heres a link to the thing I'm trying to get to work http://maninkorean.com/
<div class ="product-content">
<img class="imgClass" src="/images/pill.png" alt="description" />
<p> Daily Essentials </p>
<a id ="button" href="#">Learn More</a>
</div>
$("a#button, img").hover(function(){
$("img.imgClass").animate({opacity:1},300);
}).mouseout(function(){
$("img.imgClass").animate({opacity:0.6},300);;
});
img.imgClass{
opacity: 0.6
}
#button {
padding: 10px 24px;
background:#F15951;
border: medium none;
border-radius: 3px 3px 3px 3px;
color:white;
margin-top:50px;
margin-bottom:50px;
font-weight: bold;
}
You should be able to do this using jQuery with the following code:
$('#id of link you want to use to change opacity').hover(function() { $('#id of image that you want to change opacity of').css({ 'opacity' : 0.25 }); });
Combine JQuery and CSS3's opacity features to wire up an "OnHover" event to the images that changes the opacity of the said image.
http://www.css3.info/preview/opacity/
Unless you want to see through those images and show background pattern, there is no need to deal with opacity.
Even though you can prepare semitransparent version of image and change src attribute in onMouseOver event.
But you can achieve the same effect by simply putting a div with 1-pixel semitransparent background above selected image.
Using CSS opacity will cut off older browsers.
Hi You can easily do this by css, with somethings like this:
.img {opacity:0.4; /*some more css*/ } /* (opacity:) is now supported by all browsers */
.img:hover {opacity:0.98; /* Some more css be creative... */ }
That's all!
Here's some html, css, jquery that shows how to do it:
<div></div><a>Hover On Me</a>
div{
width:300px;
height:300px;
display:block;
background:red;
opacity: 0.6
}
a{
display:block;
margin-top:20px;
width:100px;
padding:5px;
height:20px; border-radius:5px;
background:yellow;
}
$("a").hover(function(){
$("div").animate({opacity:1},300);
}).mouseout(function(){
$("div").animate({opacity:0.6},300);
});
http://jsfiddle.net/Rd5Yy/2/
It looks like in the specific example you cite, they've used CSS3 transitions. See here for a tutorial: http://www.w3schools.com/css3/css3_transitions.asp
In a nutshell using these you can do all kind of funky effects without any javascript. CSS3 is supported by modern browsers (but is pretty cutting edge as web technologies go) and isn't yet a W3C standard.
This code should do what you wanted to do (I tested it against your HTML):
$(document).ready(function() {
$("#button").hover(function(){
$("#image").animate({opacity:0.6},300);
}).mouseout(function(){
$("#image").animate({opacity:1},300);;
});
});
Okay, I just checked out your page. Firstly, it looks like jQuery is not working through the $ on your site, so you'll need to either troubleshoot that, or use it by jQuery instead. I pasted this code in on the JavaScript console on your site and it works:
jQuery("a#button, img").hover(function(){
jQuery("img.imgClass").animate({opacity:1},300);
}).mouseout(function(){
jQuery("img.imgClass").animate({opacity:.6},300);;
});
edit: Looks like you got it working as I was typing up this response
I have issue with one of site that I developing.
Situation is like this:
I'm using #font-face generated at fontsquirrel.com, and in every browser, except for IE8 it works fine. In the beginning it worked for IE8 too, but (I guess) after update it stops working normally.
This is what's happening, after page is loaded, font on the page stays the same until you mouse over the document, after that it applies #font-face rule.
You can see that here: http://devel.2klika.net/fiolic/demo/home.php
Also I'm using fbml on that page for fb:like button, this is the code:
<span style="float: right; position: relative; left: 10px;">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/#!/pages/Mesnice-Fiolic/174173775933578" layout="button_count" show_faces="false" width="50" font="arial"></fb:like>
</span>
I figured that commenting out fb:like is solving, sort of, #font-face problem, like this:
<span style="float: right; position: relative; left: 10px;">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<!-- <fb:like href="http://www.facebook.com/#!/pages/Mesnice-Fiolic/174173775933578" layout="button_count" show_faces="false" width="50" font="arial"> </fb:like> -->
</span>
I would like to use that fb:like button if it is possible to make it work with IE8 and #font-face :)
I tested this with Windows 7 64bit, IE 8.0.7601.17514 64bit and 32bit
If I'm using IE8 in compatibility view it works normally.
Does anyone can help me with this issue?
Thanks in advance
I had found a lot of responses on other forums talking about adding namespaces to the html tag as a way of making this work. I decided to try it my self and with great joy, the like button was displaying in IE8.
I changed my html tag from:
<html>
to:
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
As seen in the code I used below:
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
</head>
<body>
<div><fb:like id="fb_like_btn_iframe" show_faces="no" width="220" href="http://www.pixorial.com"></fb:like></div>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
api_key = "<%= FACEBOOK['key'] %>";
FB.init({
appId : api_key,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
var like_clicked = function(href, widget){
$.ajax({
type : "POST",
url : '<%= url_for :controller => :gallery, :action => :update_likes %>',
data : {"url_of_like": href, "type": "like", "authenticity_token": <%= form_authenticity_token.inspect %>}
});
parent.likeButtonChanged(href);
}
var like_unclicked = function(href, widget){
$.ajax({
type : "POST",
url : '<%= url_for :controller => :gallery, :action => :update_likes %>',
data : {"url_of_like": href, "type": "unlike", "authenticity_token": <%= form_authenticity_token.inspect %>}
});
parent.likeButtonChanged(href);
}
$(document).ready(function(){
FB.Event.subscribe('edge.create', like_clicked);
FB.Event.subscribe('edge.remove', like_unclicked);
})
</script>
</body>
</html>
I have encountered the same issue. Quite frustrating as there doesn't seem to be a solution aside from removing the like button from the page.
I've submitted a bug report to facebook for this issue.