Adding Parameters to URLs - AddThis - php

When I like the page from my site, the link is from index...I need that this link be the link of the correct page...I'm trying to take the url address( have the index of my site..then I click in a image..and open another link with infos from my photo. There has a like button and when I click , this like the link of the first page of my site , don't the current page)
I'm trying to follow this tutorial: http://support.addthis.com/customer/portal/articles/381249-adding-parameters-to-urls#.UW1-Kit8KPV
here is the code that I have tried:
<style type="text/css">
.float-all {
float: left;
width: 82px;
height: 30px;
overflow: hidden;
margin: 2px;
padding: 4px 2px;
}
.post-btn-share {
width: 100%;
overflow: auto;
}
</style>
<!-- AddThis Button BEGIN -->
<div class="post-btn-share">
<div class="addthis_toolbox addthis_default_style">
<div class="float-all">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
</div>
<div class="float-all">
<a class="addthis_button_tweet"></a>
</div>
<div class="float-all">
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
</div>
</div>
<script type="text/javascript">
var addthis_share = {
url_transforms : {
add: {
img: '<?php echo $_GET['img']; ?>',
user: '<?php echo $_GET['user']; ?>'
}
}
}
</script>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-51473a5c09315ac4"></script>
<!-- AddThis Button END -->

Going through the AddThis support site I found this article regarding URL & Title:
http://support.addthis.com/customer/portal/articles/381242-url-title#.UW26obVg8y4.
Note: Some services, most notably Facebook and LinkedIn, do not use
parameters we send to them. Rather, they use meta tags to determine
the URL, title, and description to share. See this blog post for more
information. See this blog post for more information.

Related

EasyUI panel-header doesn't fit panel

I use an EasyUI panels, but the panel-header doesn't fit the panel so I can't see the icon for the actions of the panel.
EasyUI creates this result :
<div class="panel" style="display: block; width: 400px;">
<div class="panel-header" style="width: 412.222px;">
<div class="panel-title">Select picture</div>
<div class="panel-tool">
</div>
</div>
<div id="foto_panel" style="display: block; width: 402.222px; height: 473.111px;" class="easyui-panel panel-body" title="">
content of the panel
</div>
So, you can see that the width of the header <div class="panel-header"> excetes the width of the wrapping <div class="panel">.
All is made by a PHP-function that returns the html based on this script:
$script="
$(function(){
var w = 400;
var h = 500;
$('#foto_panel').panel({
title: 'Select picture',
width: w,
height: h,
tools:[{
iconCls: 'icon-plus',
handler: function(){
}
},{
iconCls: 'icon-reload',
handler: function(){
$('#".$combo_id."').combobox('reload','".$url."');
}
}]
});
});";
UPDATE:
I found that some properties (like padding: 0px e.g.) in the css is fooling around with the EasyUI scripts.
What needs to be changed/commented for EasyUI is working properly.
Thanks.
solved

Links changing when hovering Main menu buttons?

So, I have a main menu bar on my website and a "submenu" bar just underneath. The submenu bar is currently not linked at all to the main menu bar (I mean by this, on any page that you are, the submenu bar is the same).
This is what it looks like: (sorry for the ugly paint skills)
Anyway, I'm trying to make the links in the submenu bar change when you hover one of the big buttons of the main menu.
This is what I tried in my html:
<div id = 'nav'>
<div id = 'hovermenu1'>
<div class = 'button-accueil'></div>
<div id = 'menu1'>
Link 1
Link 2
Link 3
</div>
</div>
<div id = 'hovermenu2'>
<div class = 'button-guide'></div>
<div id = 'menu2'>
Link 1
Link 2
Link 3
</div>
</div>
[...] <!-- And we go on like this until hovermenu6 -->
<div id = 'hovermenu6'>
<div class = 'button-contact'></div>
<div id = 'menu6'>
Link 1
Link 2
Link 3
</div>
</div>
</div>
And in my css:
#menu1 {
background:url(/images/menu.jpg) no-repeat left top;
text-align:center;
display:none;
float:left;
margin-left:16px;
margin-top:2px;
padding-top:9px;
width:700px;
height:33px;
}
#menu2 {
background:url(/images/menu.jpg) no-repeat left top;
text-align:center;
display:none;
float:left;
margin-left:16px;
margin-top:2px;
padding-top:9px;
width:700px;
height:33px;
}
[...] /* And we go on like this until menu6 */
#menu6 {
background:url(/images/menu.jpg) no-repeat left top;
text-align:center;
display:none;
float:left;
margin-left:16px;
margin-top:2px;
padding-top:9px;
width:700px;
height:33px;
}
#hovermenu1:hover #menu1 {
display: inline;
}
#hovermenu2:hover #menu2 {
display: inline;
}
[...] /* And we go on like this until hovermenu6 */
#hovermenu6:hover #menu6 {
display: inline;
}
This, unfortunately, doesn't work.
I figured out it kinda works when I didn't close all the div id="hovermenu1/2/3/4/5/6 and closed them all at the bottom but it still doesn't work properly at all. When you hover The 6th button, it considers that you are hovering all buttons and it tries to display all menus.
Could you help me figure out what I am doing wrong and how I could fix this please?
Thank you so so much if anyone can help me. I'm stuck on this thing for a while!
Regards,
Orangow.
I would simply your HTML and not try to tie the main buttons to the submenu quite as much. It's not necessary. You can simply make one div for each submenu, and hide all of them except the one that's active. Then use JavaScript to capture the hover event for each main menu item, and hide/show the submenu as necessary. For instance:
<div id="main1">Button</div><div id="main2">Button2</div><div id="main3">Button3</div>
<div id="sub1" style="display:none;">Link 1Link 2Link 3</div>
<div id="sub2" style="display:none;">Link 1Link 2Link 3</div>
<div id="sub3" style="display:none;">Link 1Link 2Link 3</div>
<script>
$(document).ready(function(){
$('#main1').hover(function(){ $('#sub1').show(); $('#sub2').hide(); $('#sub3').hide(); },
function(){ $('#sub1').hide(); }
$('#main2').hover(function(){ $('#sub2').show(); $('#sub1').hide(); $('#sub3').hide(); },
function(){ $('#sub2').hide(); }
$('#main3').hover(function(){ $('#sub3').show(); $('#sub2').hide(); $('#sub1').hide(); },
function(){ $('#sub3').hide(); }
});
</script>
This is kind of down-and-dirty, but hopefully, it makes sense and moves you along.

prevent tabs to be seen while window reloading

I have a page which has 4 jquery UI tabs. The first tab just displays a message saying "HELLO". The 2nd, 3rd and 4th tabs have some html and php scripts running. All the pages are getting displayed properly. But say for example I am executing the php script on the 3rd tab by submitting a button. It does get executed but when the page reloads, I see the first tab flicker for a second and then the 3rd tab gets displayed. Same is the case for all the tabs. The first tab always gets displayed for a seconds and then it goes. Could you please let me know to add some code so that the 1st tab (or the div in which it is written ) is bypassed when other tab executes some php script.
My Javascript is as follows :
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function()
{
$("#menu ul li a").click(function(e) {
e.preventDefault();
$("#menu ul li a").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
$("#menu").tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
});
My HTML code is as follows :
<div id="menu">
<ul>
<li><a href="#tab-1" onClick="window.location.href='#tab-1';return false;" >Welcome</a></li>
<li>Activation Response Generator </li>
<li>Decode Support Key</li>
<li>Decode Recovery Key</li>
</ul>
<div id="tab-1" >
<div id ="main">
<div align=center>
<table style="padding-top:20px;"> <tr>
<td style="padding-left:20px;"> <img src="Aruba_Networks_newLogo.png " /> </td>
<br/>
</div>
<?php session_start();$user = $_SESSION['usr'];?>
</br>
<tr>
<td> <font size ="6"> <b> <u> Welcome <?php echo $user; ?></u> </b> </font> </td>
</br>
</br>
<td> <font size ="6"> <b> <u> HAVE A GREAT DAY </u> </b> </font> </td>
</br>
</br>
<td> <font size ="6"> <b> Logout </b> </font></td>
</tr>
</div>
</div>
<div id="tab-2">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
<div id="tab-3">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
<div id="tab-4">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
</div>
Create a overlay div. Put this inside the body for the whole page, or inside a div with position: relative.
CodePen
.overlay {
position: fixed; /* or absolute if inside a div */
width: 100%; height: 100%;
background: white;
}
At some point, hide that div to show the underlying content. This would likely be in a document ready handler, or after an AJAX call.
$(document).ready(function(){ $('.overlay').fadeOut(); });
You can also spice it up, and put a loading message inside the overlay.
<div class="overlay">
<h1>Loading</h1>
</div>
.overlay h1 {
position: absolute;
top: 45%; /* nearly the center, good enough for a second of visibility */
text-align: center;
width: 100%;
}

My jQuery IMG center script fails in Chrome and Safari, but works IE?

I have an e-commerce site where I'm displaying all my products and the thumbnails need to be centered in a div. The centering works in IE(even in compatibility mode), FF, and Opera, but fails in Chrome and Safari. In Chrome and Safari the image stays on the top of the div and does not center. I've changed my CSS around trying to locate the problem, but I can't seem to find what's causing the issue? Anyone see anything?
IE (GOOD)
CHROME (BAD)
JQUERY
var _h = $('div.product-image').height();
$('div.product-image img').each(function()
{
var _top = (_h - $(this).height()) / 2;
$(this).css('margin-top',_top);
});
CSS
.product
{
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
}
.product-image
{
margin:2px auto;
width:194px;
height:145px;
text-align:center;
border:1px solid #999;
}
.product-image img
{
max-height: 100%;
max-width: 100%;
border:1pc solid #999;
}
HTML
<div id="content">
<a href="#">
<div class="product">
<div class="product-image">
<img src="1.jpg" />
</div>
<div class="product-model">sadf</div>
<div class="product-price"> : 234</div>
</div>
</a>
<a href="#">
<div class="product">
<div class="product-image">
<img src="2.jpg" />
</div>
<div class="product-model">sdaf</div>
<div class="product-bottom"> : 2345</div>
</div>
</a>
</div>
Here's the Fiddle link : http://jsfiddle.net/anaZD/
You might check this, it worked for me:
How to vertical align image inside div
div {position:relative;}
img {position:absolute;top:0;bottom:0;margin:auto;}
.image {min-height:50px}
div is your .product-image
img is .product-image img
Perhaps the problem is with margintop. jQuery CSS uses 'marginTop' rather than 'margin-top' and you might want those images instead to be positioned relatively based on your calculations on the original script.
Here is an example, can you clarify if that's what you are trying to accomplish? See attached the JsFiddle
The Javacript
var a=$;
a.noConflict();
var CountP=new Array();
jQuery(function(a){
a("div.product-image img").each(function(b,c){
CountP[c]=(( a(this).parent('div').parent('div').height() - a(this).height() ) / 2) +'px';
//Alert as we go for testing
alert('The difference that we are looking for this product is: ' + CountP[c] + ' and the height of this product is:' + a(this).height() );
To ensure browser compatibility try with marginTop for CSS or like in this example,
position:relative; top and left values;
a(this).css({'border':'2px inset red','position':'relative',
'top': CountP[c], 'left':'0.1em','margin':'auto','marginTop':'0.1px', 'display':'inline-block'});
})
});
Below a test on jsfiddle.net.. hope it help you out!
http://jsfiddle.net/mt5fk/93/
With your provided images ;) The JS is the same but it does not allow me to update with the link
var a=$;
a.noConflict();
var CountP=new Array();
jQuery(function(a){
a("div.product-image img").each(function(b,c){
CountP[c]=(( a(this).parent('div').parent('div').height() - a(this).height() ) / 2) +'px';
alert('The difference that we are looking for this product is: ' + CountP[c] + ' and the height of this product is:' + a(this).height() );
//to ensure browser compatibility try with marginTop for CSS or like in this example, position:relative; top and left values;
a(this).css({'border':'2px inset red','position':'relative','top': CountP[c], 'left':'0.1em','margin':'auto','marginTop':'0.1px', 'display':'inline-block'});
});
});
New JSFiddle
http://jsfiddle.net/mt5fk/94/

include javascript in wordpress

I'm having a problem with a javascript that I want to include in a wordpress template page.
What I'm trying to do:
On this page - http://www.pcworld.ro/vworker/ - I want to call a javascript that will fade-in/out 6 images (you can see the first image in the top right side of the header).
This is the script: http://www.pcworld.ro/vworker/wp-content/themes/visualtime/js/innerfade.js
This is what I have in header.php:
<?php wp_enqueue_script('innerfade', '/vworker/wp-content/themes/visualtime/js/innerfade.js', array('jquery'));?>
<?php wp_head();?>
<script type="text/javascript">
$(document).ready(
function(){
$('ul#screenshots').innerfade({
speed: 1000,
timeout: 4000,
type: 'random',
containerheight: '259px'
});
});
</script>
This is what I have in functions.php:
<?php
function load_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('innerfade', '/wp-content/themes/visualtime/js/innerfade.js', array('jquery'));
}
add_action('init', 'load_scripts');
?>
And this is the code that should be responsible for the javascript in homepage.php (the wordpress template page where I need the javascript to work):
<div id="screenshot" style="overflow:hidden;">
<ul class="innerfade" id="screenshots" style="list-style: none outside none; margin: 0pt; padding: 0pt; cursor: pointer; position: relative; height: 259px;" onclick="location.href='#'">
<li style="z-index: 6; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot1.jpg" alt="Room Booking System">
</li>
<li style="z-index: 5; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot2.jpg" alt="Complete Administration Panel">
</li>
<li style="z-index: 4; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot3.jpg" alt="Meeting Room Bookings">
</li>
<li style="z-index: 3; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot4.jpg" alt="View Statistics of All Room Bookings">
</li>
<li style="z-index: 2; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot5.jpg" alt="Including a Helpdesk System">
</li>
<li style="z-index: 1; position: absolute; display: list-item;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot6.jpg" alt="Intelligent Recurring Bookings">
</li>
</ul>
</div>
I'm a beginner when it comes to wordpress and an absolute noob when there's javascript involved. Could you please explain me what I'm doing wrong and to fix it?
This is common among wordpress theme developers, they automatically include jQuery.noConflict() in jquery file to avoid collision with other libraries.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Several choices:
Remove jQuery.noConflict(); from bottom of the jquery file
-or-
Replace $ in all your code with the text jQuery. The plugin files you use should be insulated and are OK
-or-
Change
$(document).ready(
function(){
//.........
}
to
jQuery(document).ready(
function($){
//.........
}
WIth $ as argument in ready you can use $ inside it

Categories