PHP echo and onmouseover - echo

I have this HTML code and it works perfect:
<img onmouseover="this.src='http://www.example.com.img1.jpg';" onmouseout="this.src='http://www.example.com.img2.jpg';" src="http://www.example.com.img2.jpg" alt="ALT Text" class="img-responsive"/></br>
I want to add this code in PHP and replace the link and image urls with this variables: $link, $image_src1 and $image_src2.
I tried this code:
<img onmouseover="this.src='.$image_src1.';" onmouseout="this.src='.$image_src2.';" src=".$image_src2." alt="ALT Text" class="img-responsive"/></br>
I think I can not manage how to use quotes, because of this, I am getting an error.
Thank you in advance!

Thank you #Muhammad I managed it to work with CSS and :hover
This is my code in case someone needs it:
echo '<div class="effect">';
echo '<img class="image" src="'.$image_src.'';
echo '<img class="image hover" src="'.$image_src2.'';
echo '</div>';
And the CSS:
.effect img.image{
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}

Try this:
$link = 'http://www.google.com';
$image_src1 = "https://image.flaticon.com/icons/svg/148/148766.svg";
$image_src2 = "https://image.flaticon.com/icons/svg/149/149147.svg";
echo '<img onmouseover="this.src='.$image_src1.';" onmouseout="this.src='.$image_src2.';" src="'.$image_src2.'" alt="ALT Text" class="img-responsive"/></br>';
But you really need to look in your code logic, for mouseover/out. You can achieve same logic using CSS :hover property in simple and elegant way.

Related

JQuery Class selector not working on Zoom plugin

I've been trying to get jQuery to select a particular element in the JQuery zoom plugin but it doesnt seem to be working
This is the html markup for the zoom region
<div class="zoom" style="width: 60% !important; display: block; position: fixed; overflow: hidden;">
<img src="//cdn.shopify.com/s/files/1/0456/6809/t/3/assets/bx_loader.gif?27021" alt="" class="abs-center-translate loader">
<img src="//cdn.shopify.com/s/files/1/0456/6809/products/568A.jpeg?v=1413437903" class="zoomImg" style="position: absolute; top: -1385.54456824513px; left: -389.68108776267px; opacity: 1; width: 682.5px; height: 1024px; border: none; max-width: none; max-height: none;">
</div>
function showZoomImgSmaller(img) {
var zoomsmall = $('.zoom');
zoomsmall.empty();
zoomsmall.append('{{ "bx_loader.gif" | asset_url | img_tag: "", "abs-center-translate loader" }}');
$('.collectionZoomContainer').show();
zoomsmall.attr( "style","width:60%!important" );
var zoomsmallimg= $('.zoom > img');
console.log(zoomsmallimg.next().get());
$('.zoomImg').attr("style","max-width:500px!important");
zoomsmall.show();
zoomsmall.zoom({url: img, magnify: 0.5});
}
The console returns just a [] for the .zoomImg.get() and an undefined for a .zoomImg.html()
I want to change the css of this particular element and can only do it through jquery.
Any help will be greatly appreciated. Thanks
There is a lot going on here that I cannot see, but my guess is that when you call empty() on your div, you are removing all children of the div (including the .zoomImg class which you are trying to look up later). Instead of removing all elements, you might just want to remove the first image:
function showZoomImgSmaller(img) {
var zoomsmall = $('.zoom');
$('.zoom > .loader').remove(); //change is here
zoomsmall.append('{{ "bx_loader.gif" | asset_url | img_tag: "", "abs-center-translate loader" }}'); //angular? not sure what this does
$('.collectionZoomContainer').show(); //not sure what this
zoomsmall.attr( "style","width:60%!important" );
var zoomsmallimg= $('.zoom > img');
console.log(zoomsmallimg.next().get());
$('.zoomImg').attr("style","max-width:500px!important");
zoomsmall.show();
zoomsmall.zoom({url: img, magnify: 0.5});
}
Hey so I managed to get my style applied by appending css in the head of the page. This style was applied even though the element didnt exist till later.
This is the code I used.
$("<style type='text/css'> .zoomImg{ max-width:200px!important;} </style>").appendTo("head");
Cheers.

Can I toggle an image with Jquery, yet have live text upon click?

I'm not sure if my question makes sense, but,
I'm using jQuery to toggle an image from its off-state to its on-state upon click.
That was hard enough to get to work (I'm rather novice).
The problem is that the on-state is an image with a fair amount of body copy. It obviously does not look as good as it would if it were live type.
I was wondering, if it's even possible, that the on-state be a div with live text that is hidden until the image is clicked.
I have no idea how to go about solving this problem as my knowledge of jQuery is rather limited.
The page is currently being hosted here
Script:
<script type="text/javascript">
$(function(){
$("#click li").click(function (e) {
$("#click li.selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
});
</script>
You could include both a div -- initially hidden, with size matching the image -- and the image in each li.
CSS:
.imagetext {
display: none;
height: 50px; /* or whatever */
width: 50px;
}
#click li img {
display: block;
height: 50px; /* or whatever */
width: 50px;
}
#click li.selected img {
display: none;
}
#click .imagetext {
display: block;
}
HTML along the lines of:
<div id="#click">
<ul>
<li>
<img src="..." />
<div class="imagetext">Four score and seven...</div>
</li>
<!-- ... -->
</ul>
</div>

Remove ~20px gap at right side of HTML mail on iOS

Recently I have been working on a contact form for my portfolio website. The form works and I have managed to successfully send HTML mail from the server it's hosted on to my email address. Like most of my emails, these will be primarily read on my iPod Touch so the theme I based the mail template on is engineered for a screen 320px by 480px.
Even though the mail container element is set to width:100% and the same on all inner elements, there is a ~20px gap at the right side of the screen, as if that's the edge of the document:
Here is the script and style-sheet for reference:
PHP (snippet), request_form.php:
...
$email_subject = "Graphic Request - ".clean_string($first_name);
$email_message .= '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/><link rel="stylesheet" href="http://blieque.comli.com/mail-styles.css" type="text/css"></head><body><table id="all" cellspacing="0" cellpadding="0">';
$email_message .= '<tr><td id="head"><h1>New Request</h1></td></tr>';
$email_message .= '<tr><td class="info"><span id="param">Name:</span> '.clean_string($first_name).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Email Address:</span> '.clean_string($email_from).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Service:</span> '.clean_string($service).'</td></tr>';
$email_message .= '<tr><td class="info sub jstfy"><span id="param">Details:</span> '.clean_string($request).'</td></tr>';
$email_message .= '<tr><td id="foot"></td></tr></table></body></html>';
...
CSS, mail-styles.css:
body {
margin: 0 !important;
font-family: Arial, Helvetica, sans-serif;
color: #242424 !important;
text-decoration: none !important;
}
#all {
width: 110%;
}
#head {
background: #1393A1;
color: #61BDC7;
border-bottom: solid 0.5em #61BDC7;
width: 100%;
padding: 1em 0.5em;
height: 20px;
}
td.sub {
border-top: solid 0.25em #1393a1;
}
td.info {
padding: 0.35em 0.5em;
font-size: 12pt;
}
td.jstfy {
text-align: justify;
}
span#param {
color: #1393a1;
font-weight: bold;
}
td[class=info] {
text-transform: capitalize;
}
#foot {
background: #1393a1;
width: 100%;
height: 20px;
color: transparent;
border-top: solid 0.5em #61BDC7;
}
#line {
background: #1393a1;
width: 94%;
height: 0.25em;
margin-left: auto;
margin-right: auto;
}
The email also doesn't work well with online email viewers as they tend to have their own overriding style-sheets for common tags like <h1>. I hope the solution is something obvious.
This worked for me:
html, body {
width: 100%;
padding: 0;
margin: 0;
}
When I used min-width instead of width, the content got too wide. I also have these viewport settings in my header:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
You could try adding min-width: 100% to the <body> element to deal with the gap.
And as the others suggested, moving your styles inline should deal with the rest of your problems.
Maybe try
html, body {
margin: 0;
padding: 0;
}
HTML emails don't handle external stylesheets very well so this may be your problem.
You should only use inline styles on HTML emails as a general rule of thumb.
Here's a good guide on HTML emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
This is happening because body has padding by default on most browsers. add:
body{
padding:0px;
}
I've dealt with this issue numerous times. Every time it occurs I always realize that it's happening because I'm using cellpadding incorrectly on one of my tables.
For example, I got caught up for a bit today because near the bottom of one of the emails I was working on there is a table with a press banner that stretches horizontally across the bottom like this:
<center><!-- Press Banner -->
<table border="0" cellpadding="15" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a role="link" href="#" target="_blank" title="#">
<span class="press">
<img class="desktop" src="#" border="0" style="display:block;">
</span>
</a>
</td>
</tr>
</table>
</center>
That image is 600 pixels wide and is switched for a 320 pixel wide background image for the mobile layout. I needed to add some vertical spacing between that block and the others so I chose to add cellpadding="15" to do so, without realizing that 15 pixels would also stretch out horizontally. But on the iOS device this is extra space only renders on the right side, not the left, so its not obvious what the problem is.
To fix it, I removed the cellpadding and used table spacers instead on the top and bottom.
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td height="4"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table></td>
</tr>
There are many other reasons that this issue could occur as other people have already mentioned, but just adding this potential cause for anyone else who may be overlooking the same error that I made.
Additionally as a rule of thumb, you should never import CSS in an HTML email, you should inline as much style as possible and use depreciated CSS2 tags and oldschool HTML styling elements whenever possible to achieve the highest level of cross device, client compability. I recently uploaded a project to github(link) which is the html email template I've created while building emails for some time. It's pretty much the most compatible template you'll find anywhere.

How to hide Comment Box after Like something?

I just want to use the like button and not show any comment popup. How can I do this?
Thanks.
Yes, you can do it with a little but of css to hide the DOM element that Facebook adds.
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
display: none !important;}
I didn't have success with the above approach. What worked for me was to create a container element with the exact dimensions of the facebook like button and set overflow="hidden" to the container. This worked perfectly for me.
.fb_edge_widget_with_comment iframe { height: 20px !important; overflow: hidden; }
<style>
#fb-container {
height: 20px !important;
width: 93px !important;
overflow: hidden !important;
}
</style>
<div id="fb-container">
<div id="fb-root">
<div class="fb-like" data-href="https://www.facebook.com/youraddr" data-layout="button_count" data-width="100" data-show-faces="false" data-share="false">
</div>
</div>
</div>
just add this style to the style="overflow: hidden !important;" to the div like i have done below
<div class="fb-like pull-right" data-href="http://thegoldbook.in/demo/singlequestion.php?ques_no='.$ques_id.'" data-width="100" data-layout="button" data-action="like" data-show-faces="false" data-share="true" style="overflow: hidden !important;"></div>

Display a public Facebook event on a web page

How can I show information from a specifiec Facebook event on a webpage?
Things like: time, location, created by, more info, and also the image used as thumbnail.
Even if I didn't created that event.
Someone else created it.
I just have the url of that Facebook event and I can find the user id of the person who created it.
I found this page:
http://www.codeofaninja.com/2011/07/display-facebook-events-to-your-website.html
But it's not the same as I want, and I couldn't figure it out how to do it.
Any help is much appreciated.
What languages do you program in? say php or javascript, and i will post a quick sample?
You can use one of the many SDK's but for me the 2 that are easiest to use are the php-sdk and javascript-sdk.
https://developers.facebook.com/docs/sdks/
Using either you can just send a request to the graph api to retrieve the info about the event by its id.
https://developers.facebook.com/docs/reference/api/
https://developers.facebook.com/docs/reference/api/event/
EDIT: Sample assumes php-sdk 3.1.1 is installed and initiated. Will show 8 of the most recent events added to page or app. App Access Token is required.
<?php
$pageid='YourPageId.or.AppId';
$MEevents = $facebook->api('/'.$pageid.'/events?access_token='.$app_access_token.'&fields=id,name,from,start_time,location,end_time&limit=8');
echo '<div align="center" style="border: 0px solid; width: 100%;">';
foreach ($MEevents as $key=>$value) {
$i=1;
foreach ($value as $fkey=>$fvalue) {
if($fvalue[id]==h){
}else{
$i++;
$whofrom = $fvalue[from];
$whofromname = $whofrom[name];
$whofrompic = $whofrom[id];
echo '<div title="'.$fvalue[name].'" style="vertical-align: top; border: 1px inset; width: 700px; min-height: 80px; margin: 2px;">';
echo '<div id=""></div>';
echo '<div style="margin: 4px; padding: 3px; text-align: left;">';
echo '<img src="https://graph.facebook.com/'.$fvalue[id].'/picture" style="float: left; clear: left; margin: 5px;"> ';
echo ''.$fvalue[name].'<br />';
echo 'Location: '.$fvalue[location].'<br />';
echo 'Starts '.nicetime($fvalue[start_time]).' - Ends '.nicetime($fvalue[end_time]).'<br />';
echo '</div>';
echo '</div>';
}
}
}
echo '</div>';
?>