I have a classifieds section. I want to allow users to share a particular ad from a page. I have created a page that allows a user to print the ad out, so I used that page as the actual share link. The problem is, that when I use the script that opens it's own smaller window, no matter what I specify as the link it shares the entire page, not the URL I specify. Here is the code I am using.
<script>function fbs_click() {u='http://<?php echo $_SERVER['SERVER_NAME']; ?>/classifieds/printAd.php?AdID=<?php echo $row_rsAds['AdID']; ?>';t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; text-decoration:none; } </style> <a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a>
if I use the following code, it works just as it should, but it won't open in a new smaller window, it goes to the facebook site and away from my site.
Share on Facebook
<a class="boldbuttonsFaceBook" href ="http://www.facebook.com/sharer.php?u=http%3A%2F%2F<?php echo $_SERVER['SERVER_NAME']; ?>%2Fclassifieds%2FprintAd.php?AdID=<?php echo $row_rsAds['AdID']; ?>&t=Dragboats.com Classifieds"><span>SHARE ON FACEBOOK</span></a>
Thanks for you help!
function fbs_click() {
u=link;
t=document.title;
w = window.screen.width;
h = window.screen.height;
window.open(link,'sharer','menubar=1,resizable=1,width='+w+',height='+h+'25');
}
The above opened it for me in the same size as the screen resolution. Try it out and let me know.
I actually figured it out. Put the script in the head of the document, and just referenced the function with parameters to get the desired result. Worked perfectly.
In the head:
<script>
function fbs_click(u, t) {
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;}
</script>
<style>
html .fb_share_button {
display: -moz-inline-block;
display:inline-block;
padding:1px 20px 0 5px; height:15px;
border:1px solid #d8dfea;
background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right;
}
html .fb_share_button:hover {
color:#fff; border-color:#295582;
background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right;
text-decoration:none;
}
</style>
And then for each ad:
<a rel="nofollow" href="#" class="fb_share_button" onclick="return fbs_click('http://<?php echo $_SERVER['SERVER_NAME']; ?>/classifieds/printAd.php?AdID=<?php echo $row_rsAds['AdID']; ?>', 'Dragboats.com Classified Ad' )" target="_blank" style="text-decoration:none;">Share</a>
Worked like a dream.
Related
I am trying to have the sprite that shows up beneath these links to change based on what the URL says so when you click on the link for "Home" and are directed to index.php, the button in the menu bar now has a separate sprite.
The interesting thing, is that it works beautifully whenever I visit my site on mobile, however it does not want to work when I view it on a computer.
Here is a summary of my code:
<div id="nav">
<span>
<br><br>
<?php
$host = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
if (strpos($host, 'index.php') !== false) {
echo "<span><a href='index.php'>Home</a></span>";
} else {
echo "<a href='index.php'>Home</a>";
}
?>
</span>
</div>
With the corresponding CSS:
span span a {
display: block;
background: url(../images/button_sprite_selected.png) no-repeat;
height: 80px;
width: 164px;
}
span a {
display: block;
background: url(../images/button_sprite.png) no-repeat;
height: 80px;
width: 164px;
}
This is also my first post here and am fairly new to coding with php! Let me know if there is any other information I must include or if the URL to my website would help or not.
Thanks!
I suspect the issue is because of the second 'span a' in the CSS causing selector rules not to be set correctly. I'd consider using a class rather than relying on spans.
Setting an 'active' class to the link you wish to change is a good way to solve the issue:
<div id="nav">
<span>
<br><br>
<?php
$host = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
if (strpos($host, 'index.php') !== false) {
echo "<span><a class='active' href='index.php'>Home</a></span>";
} else {
echo "<a href='index.php'>Home</a>";
}
?>
</span>
</div>
span span a.active {
display: block;
background: url(../images/button_sprite_selected.png) no-repeat;
height: 80px;
width: 164px;
}
span a {
display: block;
background: url(../images/button_sprite.png) no-repeat;
height: 80px;
width: 164px;
}
What i have:
I have a player status script for our Minecraft Server which displays the name of the server the ip and the heads of the current players. 2 Div boxes for the statusbox: An outer 1 to fix the position and the 2nd one for the divbox itself.
What i want:
I want the current divbox where the iframes are in:
<div class="statusbox">
<div class="statusboxinner">
<iframe src="players_main.php" height="auto" width="140px" frameborder="0" scrolling="no" padding="fixed" marginheight="auto"></iframe> <iframe src="players_hg.php" height="auto" width="140px" frameborder="0" scrolling="no" marginheight="auto"></iframe>
</div>
</div>
To be 100% fixed to the php file which is loaded by the iframes.
CSS codes:
.statusbox {
position: fixed;
background: none;
margin-top: 472px;
margin-left: 1000px;
#pointer-events:none;
z-index:0;
}
.statusboxinner {
float: right;
margin-right: -243px;
#pointer-events:auto;
position: relative;
padding: auto;
height:auto;
padding-top:auto;
margin-bottom:auto;
background-color: white;
border-radius: 3px;
text-shadow: 0px 1px 0px black;
box-shadow: inset -4px 0px 5px rgba(0,0,0,0.2);
}
You can look at it on this page www.ravand.org (right floating box)
What my problem is:
I could simply add a fixed amount of pixels to be the height of the divbox but the problem is, that according to how many people are playing on the server the php file/ the iframe enlarges to the bottom.
When i try to set "height:100%" the statusbox simply just gets enlarged all the way to the buttom which is not what i need.
I would gladly solve this problem without iframes if you have any suggestions.
Thanks in advance
ravand
found a cool script I think should do the trick here.
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
currently revising my code for my menu bar just want to ask on how to change the class of my hr tag wherein whenever I click a link the line below the link will change. Well I'm doing it for my horizontal menu. I've made the some code but I admit I'm not so sure of what I'm doing. Well here's my code so far:
HTML
<div class="menu">
<table class="menu_item">
<tr>
<td>
Events
<hr class="active" />
</td>
<td>
Reports
<hr />
</td>
<td>
Settings
<hr />
</td>
<td>
Logout
<hr />
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="<?php echo $base; ?>javascripts/anim.js"></script>
CSS
.menu{
margin-top:20px;
margin-bottom:10px;
}
.menu_item td{
text-align:center;
width:25%;
}
.menu_list{
width:1000px;
margin-left:auto;
margin-right:auto;
}
.active{
background-color:#330000;
}
a {
color:#ffffff;
text-decoration:none;
outline:0;
border:0;
}
hr.active{
color:#ffff00;
}
and the Jquery
$("a").click(function() {
$("hr").click(function (){
$("hr").removeClass("active");
$(this).addClass("active");
});
});
Well I basically just want it to appear like the tabs on android ICS a little bit. Just a little bit though.
I'm not sure what Google ICS looks like, but I think this does what you're asking.
$("a").click(function() {
$("hr").removeClass("active");
$(this).next().addClass("active");
});
Demo here. I changed the CSS a bit.
In your code, the $("hr").click is unnecessary. The user does not click on the hr tag, only the a tag. Also, you were adding the active class to the a tag, not the hr.
$("a").click(function() {
$(this).next().toggle();
});
Thanks
take a look on the give example:
$('.menu_item a').each(function(i, e){
$(this).click(function(){
$('.menu_item hr').removeClass('active');
$(this).next().addClass('active');
});
});
here is the live working code: http://jsfiddle.net/jogesh_pi/EFmvJ/
Try the following
$('.menu a').click(function(){
//Selects hr tag below a tag and toggle active
$(this).next().toggleClass('active');
});
But you will also need to change your CSS .active class to the following to change an HR tag color
hr.active{
display: block; height: 1px;
border: 0; border-top: 1px solid #ffff00;
margin: 1em 0; padding: 0;
}
From what I can understand I may need to modify both the header.php file as well as the style.css file. I've uploaded the image to the hosting website and I believe it is a relative link: (/public_html/wp-content/themes/sandbox/Header-1.jpg)
So. This is the style.css code I have:
#header { border-bottom:none;
height:200px;
padding-top:0;
padding-bottom:0;
background:url("/public_html/wp-content/themes/kid/Header-1.jpg")
no-repeat bottom center; }
#headerimg {
height: 200px;
width: 800px; }
This is the original php in header.php
<div id="header">
<h1 id="blog-title"><span><?php bloginfo('name') ?></span></h1>
<div id="blog-description"><?php bloginfo('description') ?></div>
</div><!-- #header -->
I've tried replacing the h1 id and the div id lines with
<img src= "/public_html/wp-content/themes/sandbox/Header-1.jpg"/>
but that wasn't effective.
Right now the website has no header and can be seen here: www.dearjasmina.com
Thanks for your time!
The path you're using is incorrect. It should be /wp-content/themes/sandbox/Header-1.jpg.
So you're css should read
#header {
height:200px;
padding-top: 0;
padding-bottom: 0;
background:url('/wp-content/themes/kid/Header-1.jpg') no-repeat bottom center;
}
Try
#header { border-bottom:none;
height:200px;
padding-top:0;
padding-bottom:0;
background:url("/wp-content/themes/kid/Header-1.jpg")
no-repeat bottom center; }
#headerimg {
height: 200px;
width: 800px; }
Your background is actually at
http://www.dearjasmina.com/wp-content/themes/sandbox/Header-1.jpg
It appears as though the relative-URL is incorrect. Try removing the /public-html.
remove public_html folder in your image path, use like below
<img src="/wp-content/themes/sandbox/Header-1.jpg">
There's a 404 Not Found on your image, according to IE Network Sniffing. Double check your url.
I have click-able images in my html page that call a javascript function... however nobody is clicking on them as they do not look click-able... how can I make them click-able without using an tag around it?
Here is an example of my code...
<div id="bvu11" style="margin: 0px 5px; float: left;">
<span id="bviu11">
<img src="/images/icons/favorites_add.png" onclick="favoritesAdd(2,11,'u')">
</span>
</div>
Using CSS
Add a class to your image (ex: clickable-image) and this in your CSS:
.clickable-image
{
cursor: pointer;
}
Have a look at the css cursor property
<span id="bviu11" style="cursor: pointer;">
As well as adding the cursor:pointer, perhaps some styling to your images/buttons would also make them appear to be links before the user even has to hover over them. Try a simple border, or dropshadow/glow on the images to give them a more 3D effect, making them look more "clickable"! Also, adding a hover state (a different styling to the image/button) really helps.
Change
<div id="bvu11" style="margin: 0px 5px; float: left;">
to
<div id="bvu11" class="spanLink">
and add
.spanLink {
margin: 0px 5px;
float: left;
cursor: pointer;
}
to your css.