I am currently coding a website where lines of information are drawn from a database and displayed using PHP coding (about 20 pieces of info per page). I have included the javascript SDK for facebook after the head and generated the div tag for the send button for each piece of information. My intention is to have a user click the send-button for a specific line of information and transmit the url for only that info - not the main page.
Using php coding I have changed the data-href URL in the fb-send div to represent the referenced information and pass the php variable through the URL. While the URL tests correctly it is not being represented when the send button is clicked (it only references the main page).
Is it possible to pass PHP variables through the URL of the send button?
If so, how can I do this?
If not, what are other options to achieve my desired outcome?
Please let me know if my problem is unclear! Thank you very much for the help!
Try with this
$url_view = "http://".$_SERVER['HTTP_HOST'] . getenv('REQUEST_URI');
$facebook =
"<div class='socialshare_fb'>
<iframe scrolling='no' style='border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; height: 20px; width: 90px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial;' title='Share on Facebook.' src='http://www.facebook.com/plugins/like.php?href=".$url_view."&action=like&layout=button_count&locale=pt_PT &node_type=link&show_faces=false&width=90'>
</iframe>
</div>";
echo $facebook;
Related
Hi I've been trying to create a smart button menu set in an drupal block that remembers which button has been clicked (which site it is on). For reasons that don't matter, it is not a menu it's an in-block item. I created the following in-line:
<div>Overview</div>
<div>Instruments</div>
<div>Travel</div>
This coupled with the following css produces lovely buttons:
.button {
background-color: #61210b;
color: white;
float:left;
padding: 2px;
border: 2px solid #000000;
border-radius: 5px;
text-shadow: 1px 1px #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'verdana';
margin-bottom: 10px;}
.button:hover {
background-color: green;
color: white;}
.button:focus {
background-color: green;
color: white;}
.button:active {
background-color: green;
color: white;}
So everything above works great. However, the green activation color does NOT stay. As soon as I go click it goes back to what it was before. I want it to 'show' the page it is on with it's color change and only the currently chosen button will have the green color. What I have not works great except for that little issue. I've read around on the site a bit and here are some things that do not work:
--> inline php, creates errors link unreadable, if I define a class as selected with a different color, this does NOT work:
Overview
What also does not work is defining an additional class in the <a href > or <div> to make it 'selected', at best if I use the css file and do
.selected a { color: green; }
#selected a { color: green: }
I can permanently change the color to green, which is not what I want at all. I saw the discussion previously of using lists <li id="selected"> to create menues but not only does this not give me very nice buttons like my div format does, it also flat out does not work. See: CSS: How to change colour of active navigation page menu
The color just changes permanently, I only want it to change color if page=page of link. Since I'm using div this means I also cannot use the other pseudo-class-selector tricks like :target or :root. I have a feeling php is the way to go but I don't know why it can't be read in-line from my drupal box item. It has no problems with html or css in-line. Any ideas?
Try this code
CSS
.button:active, .button.selected {
background-color: green;
color: white;
}
PHP
Overview
what you wrote is calling for something else...
.selected a is targeting any element with the class "selected" which is inside an anchor tag, what you mean is an anchor tag which has the class selected = a.selected
ok, so I heard back from our system administrator and Drupal safety settings do not allow for in-line php or java scripting. There is literally no way to do this with div statements. The only way is to delete everything and make a new block of type menu block. In a menu block the psuedo-class :active will stay active if you use css
li .active
otherwise you can try to get php enabled but most drupal areas do not allow that or java scripting (at least it's not allowed where I am).
I have a little problem. At the end of my R script I create an image .png as output. I wanna show this image on my website but sometimes it is drawn, sometimes it is not drawn. I don't understand how it is possible. I`ll put my code:
I insert the image in a div with this features:
#diagramm {
position: relative;
border: 2px solid #333;
border-color: #6495ED;
width: 820px;
height: 370px;
margin: 2px auto;
margin-top: 2em;
background-image: url("/home/daniele/public_html/appweb2013/venn_final/fungo_final.png");
}
Where is the mistake? Can I use a better method?
This is CSS, it only puts specific design rules for an element that has the id diagramm.
So what you've posted is not code so to speak.
In what way do you generate the output? When? what does the user do to generate it etc.
Do you have any javascript or html code you can show?
Ok so this might be very basic but I'm struggling here.
I've got limited space but I need a comments board so I need to be able to scroll through messages. I've got my database and php setup and the messaging works fine. I've done the layout with div's so that all the comments are within the master comments div with is set to overflow: hidden, hiding the messages that don't fit. Every message is then formed as a div (which has 2 div's inside for subject/sender and comment sections). Each of the message div's is automatically given an id by the script so I have something to target here.
What I would like to do is to have the messages scroll so that when you click 'down', the topmost message will disappear and the messages will move in line so that the next one is now topmost. Is this possible? I tried to play around with childNodes but couldn't get it to work.
Also, does my layout solution make any sense? Should I change it to lists?
CSS is
#kommentit { // <- all comments
position: absolute;
margin-top: 50px;
margin-left: 475px;
width: 400px;
height: 400px;
overflow: hidden;}
.sitoja { // <- this is the single comment binder
position: relative;
width: 400px;
background: #fff;
border-radius: 10px;
padding: 0;}
I assign id for every message so I get
<div class="sitoja" id="[i]">
in php
echo '<div class="sitoja" id="'.stripslashes($info2->id).'">';
You can view the dummy of the message board here: http://pohjis.site40.net/testi.php
There are many ways to do it.
The simplest is changing overflow: hidden; to overflow: scroll;.
You can also display: none; the topmost comment to make the lower ones move up.
And you can scroll the div with javascript.
BTW, with some adjustment of the css you don't need position: absolute; - not using that will make designing things easier.
Here is the site http://www.2playermode.com/
You notice the login button. it has the nice black background done by css. How can i replicate that. I have php statements with them or some are just play links..
I have a register , lost password , and logout and admin that i need done same way. This is wordpress platform if that helps any.
Here are the code for some of them Once you login you will see them but here is code that should help.
here is some of the code
Lost your password?
here is more complicated
Log out | <?php if (current_user_can('manage_options')) { echo '' . __('Admin') . ''; } else { echo '' . __('Profile') . ''; } ?>
I have been trying different options to get the same result but come up failing. As you see the admin url and profile url i need to have same images but that is only shown once logged in.
Just read the CSS on the page (copied and pasted):
input[type="submit"] {
cursor: pointer;
}
input, textarea, select, fieldset {
color: #D1D1D1;
border: 2px solid #202020;
background: #111;
}
input, textarea {
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-family: Arial;
font-size: 9pt;
padding: 5px;
}
* {
outline: none;
}
So just add the a-tag to the CSS
Get: http://getfirebug.com/ for FF, or use the console of Chrome (ctrl+shift+j) and inspect the html element for it's css-rules.
For a one-off, custom css is probably the way to go.
But if you're doing a lot of these things, by far the easiest way to style buttons, links, and input=submit elements is jQuery's UI button It's cross-browser tested, validates, and is well-thought out for accessibility. The biggest bonus is that setting it up is just a matter of adding 2-3 classes to any element.
The other thing that makes jQuery UI so great is ThemeRoller. With it, you simple define a style on a simple GUI, upload a file, and voila....styled website elements. I actually use themeroller for most of the elements of my applications, which I can then restyle based on a client's logo colors or preferences with a simple upload. On one app, we even allow the user to switch the theme on the fly via this method. In my mind, you can't beat it.
I have two divs, one on the left, and one on the right side of my page.
I have an iframe in the middle of my site, which content is loaded from a php file with mysql results in it.
I want the two divs on my page to get the TOTAL height of my page and set it as its own height so the borders continue all the way down. I also would like the iframe to adjust its height depending on the "results_table" which "myPhpFile" echoes out.
Here is my two divs code:
<div class="bgr_left">
<div class="bgr_right">
Here is the css:
.bgr_right {
background-image: url(../Graphics/bgr_right.jpg);
background-repeat: repeat-y;
background-position: right;
position: absolute;
top: 0px;
width: 30px;
right: 0px;
background-color: #E7F5F0;
}
AND
.bgr_left {
background-image: url(../Graphics/bgr_left.jpg);
background-repeat: repeat-y;
background-position: left;
position: absolute;
left: 0px;
top: 0px;
width: 30px;
background-color: #E7F5F0;
}
And here is the iframe inside a table:
<table width="850px" height="1000px" border="0" align="center">
<tr>
<td width="845px" height="998px">
<iframe style="border:none; width:100%; height:100%;" name="iframe001" src="frame.html" id="iframe001"></iframe>
</td>
</tr>
</table>
And here is the form:
<form id="nav_form_main" name="nav_form_main" action="bincgi/myPhp.php" target="iframe001" method="get">
And here is the part in the php file which creates a table from the mysql query:
while($row = mysql_fetch_array($qry_result)){
My question: Is this way the best way to get two side borders on my page? AND, is there a way to set the iframe height to the content which is about to be loaded inside it from my "FORM"...
BACKGROUND HISTORY:
I have a form on my site, which targets the iframe, and the action on the form is a php file which returns a mysql query result inside a table. So this table is what ends up inside the iframe!
Trying to resize an IFrame onload using Javascript can be done but is very cumbersome in my experience. Using Ajax to dynamically load the PHP results into your HTML structure would be easier and more reliable. If you load the PHP output into a DIV, that DIV's height can increase the page's height, thus increasing the other DIVs' height.
You can access an iframe content height with JavaScript only if both the iframe and the JavaScript are on the same domain.
You can try inserting content with PHP like:
$content = file_get_contents('http://domain.net/iframe.php');
//
//Do something with the content here
//
echo($content);
But it's not clear solution if you can't modify the iframe.php to get only content you need. I think you'll end up with static iframe height.