I want to dynamically change the data-href for the fb comments plugin below based on a javascript variable. I'm running a flash swf file and am passing the new link for data-href into the html wrapper via a javascript function. When I do that, I want the fb comments plugin to refresh to the new data-href link.
<div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="www.example.com" data-num-posts="20" data-width="380"></div>
Called javascript function passing in the new link for the comments plugin:
function changeCommentsUrl(newUrl){
// should refresh fb comments plugin for the "newUrl" variable
}
This will load the initial comments box, the script will when executed will clear the comments div wrapper and replace html5 comments box with new url. JS SDK will then parse the new box.
JS SDK is required for this work. refer to https://developers.facebook.com/docs/reference/javascript/
fix for xfbml render from dom manipulation
<div id="comments">
<div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="www.example.com" data-num-posts="20" data-width="380"></div>
</div>
<script>
function changeCommentsUrl(newUrl){
// should refresh fb comments plugin for the "newUrl" variable
document.getElementById('comments').innerHTML='';
parser=document.getElementById('comments');
parser.innerHTML='<div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="'+newUrl+'" data-num-posts="20" data-width="380"></div>';
FB.XFBML.parse(parser);
}
</script>
user solved:
document.getElementById('comments').innerHTML='<div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="'+link+'" data-num-posts="20" data-width="380"></div>';
FB.XFBML.parse(document.getElementById('comments'));
I found the simplest and effective way to make your Facebook Comment box to recognize the individual URL of each page (particularly good for e-commerce sites).
Add this script to your top header portion of your website template (it generates de data-href value for your Comment Box div:
<script type="text/javascript" language="javascript">
jQuery("#FC").attr("data-href", window.location.href.split("?")[0]);
</script>
And then on your Comment Box div, add the id for the value generated on the javascript:
<div id="FC" class="fb-comments" data-href="" data-width="700" data-numposts="5" data-colorscheme="light">
Voilá. I dedicated so much time to crack this nut, I just had to share it for you to save some time for break!
Cheers!
Related
I am developing website by using ASP.net. I have following div layout
<div class="mainrepeater">
<div id="image" class="my-ad-repeater-image-box"/>
<div class="my-repeater-title">
<asp:HyperLink ID="hlNavigation" runat="server" Text='<%# Eval("title") %>' NavigateUrl='<%#Eval("ad_url") %>' Target="_blank"></asp:HyperLink></div>
<div class="my-repeater-content"></div>
</div>
I am setting the HyperLink navigate URL from a datasource and everythings works fine. But I want all div(mainrepeater) to be clickable instead of the hyperlink.
So how to achieve that?.
Do I need to use javascript? If not that would be great.
Thank you very much.
CSS
.my-repeater-title { cursor: pointer; }
JS
$(".my-repeater-title").click(function(){
window.location.href = "http://example.com"
});
You should use attribute data-* to retrieve your url on your js script as:
<div class="my-repeater-title" data-url="[url]">
And get on your script:
$(".my-repeater-title").on('click', function(){
var target = $(this).data('url');
window.location.href = target;
});
It's recommended to not write external data like url directly to the js file, but to fetch on html by js.
Another possible option is to wrap <div class="mainrepeater"> with <a> tag.
But this is correct only for HTML5.
For more details please check this post Is putting a div inside an anchor ever correct?
HTML
<a class="mainrepeater_link" href="http://example.com">
<div class="mainrepeater"> ... </div>
</a>
CSS (only if you target a HTML version less than 5.)
.mainrepeater_link { display: block; }
Three possible solutions come to mind
First idea: Make the size of the link bigger
If the link is the only content of your div, you can just add the following CSS to make it fill the div.
.my-repeater-title > a
{
display:block;
width:100%;
height:100%;
}
You might need to set dimensions on .my-repeater-title though. No JS required
Second idea
Swap the div and the link. Change
<div class="my-repeater-title">
...
</div>
to
<a href="...">
<div class="my-repeater-title">
...
</div>
</a>
I'm sure that's possible in ASP too. No JS required either
Third idea: Javascript
Add a click-handler in jquery. This has already been suggested by others, so I won't copy their solution and I won't bother writing a different one.
I have a banner in a div and I like to place it on home page which automatically reflects on rest of the pages?? Is it possible ?? without placing the code on the each page specifically ??.
Any help would be appreciate :)
If you're using PHP, you can write the whole banner in html, then save it as .php (e.g. banner.php). Then somewhere before the content of each of your pages, use PHP's include
keyword
For each of your page you can write it this way:
<body>
<div id='banner'>
<?php include "/path/to/banner.php"; ?>
</div>
<div id='content'>
<!-- Main content here -->
</div>
</body>
Either this can happen with php as #javiniar-leonard recommends, or you can use css.
In every page the basic structure is the same I guess. So target the div and place the div as background:
.main{
background:url("../your_banner_url.jpg");
}
I am implementing Google Maps in one of my pages. I know I need to add onload="initialize()" onunload="GUnload()" within the <body> tag but I am not sure how.
Currently within my page I have pasted the following:
<body onload="initialize()" onunload="GUnload()">
<p>To Add your Google Map you must first plot your address by searching</p>
<p>
<input id="address" type="textbox" value="" placeholder="Search For Your Address">
<input type="button" value="Plot Your Address" onclick="codeAddress()">
</p>
<div id="map_canvas" style="width: 770px; height: 270px; border: 5px solid #EDEDED">
</div>
</body>
Even though this actually works, it must be terrible mark-up as it is a body section within a body section for the main page.
I am using Wordpress but I'm not sure if the above markup is OK or whether I should be putting it in the main page body tag. The problem is that I am not sure how to do this if needed. As I only need it on one page and not my entire site, I don't want to add this to the site's body tag to initialize Google Maps on every page and slow the site down.
Thanks for any advice.
No you don't want to be adding another body tag into the specific page template that uses the map. Your opening <body> tag will be in header.php , you should get the page ID of the specific page which you want to load it on and do;
<body <?php if (is_page(374)) { echo 'onload="initialize()" onunload="GUnload()"'; } ?>>
in header.php
Which will add that code to (in my instance) page 374.
To find the page id, just hover over it in the Pages section in the backend and you can see the ID in the link url.
For multiple pages you would use;
<body <?php if (is_page(array(374,375))) { echo 'onload="initialize()" onunload="GUnload()"'; } ?>>
and you can also use the slug or title instead of ID, but of course they are easy for your client to change and stop that code working. Here's the codex link on is_page;
http://codex.wordpress.org/Function_Reference/is_page
I'm trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here's the question mark bit:
<a href="#" clicktoshowdialog="my_dialog" onclick="
(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
FBML.clickToShowDialog("app4949752878_my_dialog");
return false;">
<img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
<div id="app4949752878_my_dialog" fbcontext="aa3fcff8e653">
<div class="app_content_4949752878" style="padding:10px">
<div with hidden then exposed content...
The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I'm confused by the anchor parameter of
clicktoshowdialog="mydialog"
What is that identifying, and how is it targeting the div that's exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.
According to the wiki it's just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it's basis.
I have a page with an iframe to feature the contents of the clicked tab. There are 3 tabs and 1 iframe. The sources of the contents relating to each tab clicked are formatted and coded in other html & css files.
What is another alternative to using an iframe, because I noticed that when the tab is clicked, it still shows the white background, similar to when a new page is loading?
Here's my code:
<div id="tabs">
<div id="overview">
<a target="tabsa" class="imagelink lookA" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" class="imagelink lookA" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" class="imagelink lookA" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0">
</iframe>
</div>
The only alternative to using IFRAMEs to load dynamic content (after the page has loaded) is using AJAX to update a container on your web page. It's pretty elegant and usually faster than loading a full page structure into an IFRAME.
Ajax with JQuery (use this and you will be loved on SO; the AJAX functions are great and simple)
Ajax with Prototype
Ajax with MooTools
Standalone Ajax with Matt Kruse's AJAX toolbox (Used to use this, using JQuery today because I needed a framework)
AJAX with Dojo (Said to be fast, but AJAX is not as straightforward)
Another alternative is to use AJAX to load the content of a tab and use a div to display the content. I would suggest that using an existing Tab library might be an option rather than trying to solve all the problems associated with creating tabs.
Maybe the jQuery UI Tab might be helpful here if you like to try it.
EDIT: AJAX example with UI Tabs.
First, the HTML will look like this.
<div id="tabs">
<ul>
<li><span>Overviews</span></li>
<li><span>Gallery</span></li>
<li><span>Reviews</span></li>
</ul>
</div>
Then make sure that you import the appropriate jQuery files:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
etc...
Then add the code to create the tabs:
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
There's an alternative to AJAX!
You can load ALL three possible contents into separate DIVs.
Then clicking on a tab will simply make the display attribute of the appropriate content's DIV "block" while making the other two DIVs' display property "none".
Cheap, easy, does not require AJAX costs for extra http request or for coding.
Mind you, AJAX is a better solution if the contents of the tabs will change dynamically based on other data as opposed to being known at the time the page loads.
You don't need script.
<ul><li>foo link<li>bar link</ul>
<div class="tab" id="foo">foo contents</div>
<div class="tab" id="bar">bar contents</div>
Plus this CSS, in most browsers: .tab:not(:target) { display: none !important; }, which defaults to all content visible if :target isn't supported (any modern browser supports it).
If you're showing content with script, always hide it with script. Let it degrade gracefully if that script doesn't run.
It's probably better to load in the content for each tab into DIVs on the same page and then switch the visibility of each DIV when a tab button is clicked using JavaScript and the CSS display property.
If you can't do that then iframe is probably the best solution. You can make the iframe background transparent, see below:
<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>
You would then need to add the following CSS to the BODY element using:
BODY { Background: transparent; }
The HTML iframe is to be used to include/display non-template content, such as a PDF file. It's considered bad practice when used for template content (i.e. HTML), in both the SEO and UX opinions.
In your case you just want to have a tabbed panel. This can be solved in several ways:
Have a bunch of links as tabs and a bunch of div's as tab contents. Initially only show the first tab content and hide all others using CSS display: none;. Use JavaScript to toggle between tabs by setting CSS display: block; (show) and display: none; (hide) on the tab content divs accordingly.
Have a bunch of links as tabs and one div as tab contents. Use Ajax to get the tab content asynchronously and use JavaScript to replace the current tab contents with the new content.
Have a bunch of links as tabs and one div as tab contents. Let each link send a different GET request parameter or pathinfo representing the clicked tab. Use server-side flow-control (PHP's if(), or JSP's <c:if>, etc) or include capabilities (PHP's include(), or JSP's <jsp:include>, etc) to include the desired tab content depending on the parameter/pathinfo.
When going for the JavaScript based approach, I can warmly recommend to adopt jQuery for this.
This is jQuery example that includes another html page into your document. This is much more SEO friendly than iframe. In order to be sure that the bots are not indexing the included page just add it to disallow in robots.txt
<html>
<header>
<script src="/js/jquery.js" type="text/javascript">
</header>
<body>
<div id='include-from-outside'></div>
<script type='text/javascript'>
$('#include-from-outside').load('http://example.com/included.html');
</script>
</body>
</html>
You could also include jQuery directly from Google: http://code.google.com/apis/ajaxlibs/documentation/ - this means optional auto-inclusion of newer versions and some significant speed increase. Also, means that you have to trust them for delivering you just the jQuery ;)
As mentioned, you could use jQuery or another library to retrieve the contents of the HTML file and populate it into the div. Then you could even do a fancy fade to make it look all pretty.
http://docs.jquery.com/Ajax/jQuery.get
Something along these lines:
$.get("toframe.html", function(data){
$("#tabs-1").html(data);
});
edit..
you could prepopulate or onclick you could do the get dynamically
$("#tabs a").click(function(){
var pagetoget = $(this).attr("href");
$.get...
})
If you prepopulate could have three containers instead of the one you have now, 2 hidden, 1 display, and the click functions will hide them all except for the one you want.
The get is less code though, easier time.