I developed a website in Codeigniter, but it appends a hash string at the end of every url.
For example:
http://my_website.com/#.UR46O6Wj12I
I want to remove this hash string after every url or preventing it from being appended to the url.
Seems like you have also posted this question at ellislab, so I checked out your page through there. The problem lies in your javascript, not in codeigniter.
The code causing the hash is this in your html:
<div class="like_social">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" style="width:75px; overflow:none"></a>
<a class="addthis_button_tweet" style="width:80px;overflow:none"></a>
<a class="addthis_button_linkedin_counter" style="width:100px;overflow:none"></a>
<a class="addthis_button_google_plusone" g:plusone:annotation="bubble"></a>
</div>
<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-5112601232209e07"></script>
<!-- AddThis Button END -->
</div>
Like Rick Calder suggested, it's from some sort of an add-on, in this case a button from AddThis. More info from their support documentation can be found regarding that hash.
If you want to still keep that button, it seems that you can disable it by going to the advanced tab of the AddThis settings page and unchecking the Track address bar shares.
Alternatively, you can set data_track_addressbar to false.
please put this code end of the index file
<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.data_track_addressbar = false;
</script>
if you use tpl ddon forget {literal}this code{/literal}
this will helpfull
Related
Came across the wikipedia rss feed for their image of the day. I'd like to plug that into a test I'm doing, so their image of the day re displays on this new site. Right now, through using a rss code generator site, I'm able to display only the text. For ex my feed sort of just looks like:
Wikimedia Commons picture of the day for May 17
Picture of the day View of the rich ceiling of the Vank Cathedral in Isfahan, posibly the most impressive christi...
But no photos display. Does anyone know an easy way of adjusting this code I'm using generated from http://www.surfing-waves.com/feed.htm to display images as well? Thanks much. -Wilson
rss link: https://commons.wikimedia.org/w/api.php?action=featuredfeed&feed=potd&feedformat=rss&language=en
code:
<!-- start sw-rss-feed code -->
<script type="text/javascript">
<!--
rssfeed_url = new Array();
rssfeed_url[0]="https://commons.wikimedia.org/w/api.php?
action=featuredfeed&feed=potd&feedformat=rss&language=en";
rssfeed_frame_width="180";
rssfeed_frame_height="250";
rssfeed_scroll="on";
rssfeed_scroll_step="6";
rssfeed_scroll_bar="off";
rssfeed_target="_blank";
rssfeed_font_size="12";
rssfeed_font_face="";
rssfeed_border="on";
rssfeed_css_url="";
rssfeed_title="on";
rssfeed_title_name="";
rssfeed_title_bgcolor="#3366ff";
rssfeed_title_color="#fff";
rssfeed_title_bgimage="http://";
rssfeed_footer="off";
rssfeed_footer_name="rss feed";
rssfeed_footer_bgcolor="#fff";
rssfeed_footer_color="#333";
rssfeed_footer_bgimage="http://";
rssfeed_item_title_length="50";
rssfeed_item_title_color="#666";
rssfeed_item_bgcolor="#fff";
rssfeed_item_bgimage="http://";
rssfeed_item_border_bottom="on";
rssfeed_item_source_icon="off";
rssfeed_item_date="off";
rssfeed_item_description="on";
rssfeed_item_description_length="120";
rssfeed_item_description_color="#666";
rssfeed_item_description_link_color="#333";
rssfeed_item_description_tag="off";
rssfeed_no_items="0";
rssfeed_cache = "cb57972543b240ba8193a1b654c72b22";
//-->
</script>
<script type="text/javascript" src="http://feed.surfing-waves.com/js/rss-
feed.js"></script>
<!-- The link below helps keep this service FREE, and helps other people
find
the SW widget. Please be cool and keep it! Thanks. -->
<div style="text-align:right; width:180px;"><a href="http://www.surfing-
waves.com/feed.htm" target="_blank" style="color:#ccc;font-size:10px">widget
#</a> <a href="http://www.surfing-waves.com" target="_blank"
style="color:#ccc;font-size:10px">surfing-waves.com</a></div>
<!-- end sw-rss-feed code -->
I'm trying to add the "Pin it" button from Pinterest to the pruduct detail pages in our website.
So far I've tried:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
and
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
With any of these I can get the pruduct's URL and the product's name, but I can not get the product's image. So the post does not work (it needs all 3 items to work: URL, Media and Description)
When I try this:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
I can post the product's image, but the URL is not dynamic (I'm just using the absolute URL to the website).
Any ideas on how I could implement this button in my product detail pages?
Most of the answers here don't urlencode() the querystring that's generated for the pinterest link, so I'm a little surprised they've been working - my approach has been a variant of Andrew's that uses http_build_query() to do this for me.
The following code would work when placed inside template/catalog/product/view.phtml:
<!--START PIN BUTTON-->
<?php
$_pinlink['url'] = $_product->getProductUrl();
$_pinlink['media'] = $this->helper('catalog/image')->init($_product, 'image')->__toString() ;
$_pinlink['description'] = $_helper->productAttribute($_product, $_product->getName(), 'name') . " - " . strip_tags($_product->getDescription());
?>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<!--END PIN BUTTON-->
I've also noticed that Pinterest strips all html tags from posted descriptions, so there didn't seem much point in passing them through - hence the strip tags on the description.
This seems to work for me:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
My only concern with this is that it gives the cached image url - rather than a direct one. I do not know how permanent this cached url is. It would seem better to refer to the 'source' rather than the cached version in this instance. But I am not sure....
Have you ever try to get current product url in your code? As a result, in product view page, the URL of the product available, just get this url like below :
$curProductUrl = $this->helper('core/url')->getCurrentUrl();
// or we can take product id then use in the code
$_product = $this->getProduct();
$_id = $_product->getId();
$_productUrl = $_product->getProductUrl();
$_smallImageUrl = $_product->getSmallImageUrl();
Try this for adding the image to Pinterest. It has worked well for me.
$this->helper('catalog/image')->init($_product, 'image')->resize(150)
The URL you are generating has semicolons after each parameter. Is that intentional? (... replaces your <? php ?> blocks)
Pin It
&media;, &description;.
Try removing the semicolons.
Also, if your output is not automatically HTML escaped the ampersands should be HTML entities instead: &media= and &description=.
Here's my version of the Pin It button for magento product pages and it works beautifully.
I use the canonical url of the product. For the description: I first insert the name of the product, followed by two breaks (%0A), followed by the description of the product. The htmlentities code for the product description will convert any quotes you have so Pinterest can read it.
<!--START PIN BUTTON-->
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<!--END PIN BUTTON-->
Here is what you have to do:
Copy and paste this code into your themes view.phtml file and your all set:
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
This will load the product description, image, and link
Sometimes if you put the url later in the dynamic url, it will get stuck loading. So just copy/paste the code above and your done. No customization required.
This works for me:
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-config="beside" >
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" /></a>
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
But it uses the cached images ...
I'm trying to use the original image path, but with no success until now.
Hope this helps
I'm experiencing some strange behaviour with checkboxes on a Dojo page. In the code below I have created a search form which makes an Ajax/xhrGet request when the search text is changed - this all works as expected.
However I also have a checkbox on the same page which, when clicked, is also submitting an Ajax request. Since I have not connected the checkbox to the search I have no idea why this is happening.
Is this a bug or is there something more subtle going on here?
Any ideas/suggestions?
TIA,
BrendanC
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.Tooltip");
</script>
<div dojoType="dijit.layout.ContentPane" splitter="false" region="trailing"
style="width: 200px;">
<script type="text/javascript"> var srch = dojo.byId ("djsearch"); dojo.connect(srch, "onchange", "getbyname"); </script>
Search
<input dojoType="dijit.form.TextBox" name="dojosearch" value="Find"
trim="true" id="djsearch" propercase="true" style="width: 6em">
<p></p>
Tag Summary
<div id='tagsummary'></div>
</div>
I found the cause of my problem. Hopefully this will help someone else in the future.
Basically I did not issue the dojo.connect correctly - this needs to be done inside the 'addOnLoad' handler. In my initial code I was issuing the connect request on the page, but not in the required addOnLoad handler. The following code works correctly.
Hopefully this will help someone else in the future.
<script>
// Add the dojo.connect below
dojo.addOnLoad(function() {
// Connection s/b in 'addOnLoad' to work correctly
var srch = dojo.byId ("djsearch");
dojo.connect(srch, "onchange", "getbyname");
});
</script>
I'm trying to set up a basic web page, and it has a small music player on it (niftyPlayer). The people I'm doing this for want the player in the footer, and to continue playing through a song when the user navigates to a different part of the site.
Is there anyway I can do this without using frames? There are some tutorials around on changing part of a page using ajax and innerHTML, but I'm having trouble wrapping my head aroung getting everything BUT the music player to reload.
Thank you in advance,
--Adam
Wrap the content in a div, and wrap the player in a separate div. Load the content into the content div.
You'd have something like this:
<div id='content'>
</div>
<div id='player'>
</div>
If you're using a framework, this is easy: $('#content').html(newContent).
EDIT:
This syntax works with jQuery and ender.js. I prefer ender, but to each his own. I think MooTools is similar, but it's been a while since I used it.
Code for the ajax:
$.ajax({
'method': 'get',
'url': '/newContentUrl',
'success': function (data) {
// do something with the data here
}
});
You might need to declare what type of data you're expecting. I usually send json and then create the DOM elements in the browser.
EDIT:
You didn't mention your webserver/server-side scripting language, so I can't give any code examples for the server-side stuff. It's pretty simple most of time. You just need to decide on a format (again, I highly recommend JSON, as it's native to JS).
I suppose what you could do is have to div's.. one for your footer with the player in it and one with everything else; lets call it the 'container', both of course within your body. Then upon navigating in the site, just have the click reload the page's content within the container with a ajax call:
$('a').click(function(){
var page = $(this).attr('page');
// Using the href attribute will make the page reload, so just make a custom one named 'page'
$('#container').load(page);
});
HTML
<a page="page.php">Test</a>
The problem you then face though, is that you wouldnt really be reloading a page, so the URL also doesnt get update; but you can also fix this with some javascript, and use hashtags to load specific content in the container.
Use jQuery like this:
<script>
$("#generate").click(function(){
$("#content").load("script.php");
});
</script>
<div id="content">Content</div>
<input type="submit" id="generate" value="Generate!">
<div id="player">...player code...</div>
What you're looking for is called the 'single page interface' pattern. It's pretty common among sites like Facebook, where things like chat are required to be persistent across various pages. To be honest, it's kind of hard to program something like this yourself - so I would recommend standing on top of an existing framework that does some of the leg work for you. I've had success using backbone.js with this pattern:
http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/
You can reload desired DIVs via jQuery.ajax() and JSON:
For example:
index.php
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<a href='one.php' class='ajax'>Page 1</a>
<a href='two.php' class='ajax'>Page 2</a>
<div id='player'>Player Code</div>
<div id='workspace'>workspace</div>
one.php
<?php
$arr = array ( "workspace" => "This is Page 1" );
echo json_encode($arr);
?>
two.php
<?php
$arr = array( 'workspace' => "This is Page 2" );
echo json_encode($arr);
?>
ajax.js
jQuery(document).ready(function(){
jQuery('.ajax').click(function(event) {
event.preventDefault();
// load the href attribute of the link that was clicked
jQuery.getJSON(this.href, function(snippets) {
for(var id in snippets) {
// updated to deal with any type of HTML
jQuery('#' + id).html(snippets[id]);
}
});
});
});
I am using colorbox to AJAX some external HTML onto a page.
My client wants to print this content direct from the page, therefore i used a print CSS loaded into the head of the document with colorbox's onComplete event hook.
The content that is loaded is a raft of legacy tables with inline styles which i can't seem to overwrite with the print CSS and when i view by media type the layout looks broken.
I put this down to only retrieving a chunk of the HTML with jQuery .find() rather than the whole page.
Would it be best to use an iframe with colorbox and load the whole HTML document including header. I assume this would preserve the layout better rather than retrieving a chunk.
I am not sure how to print the iframe's content. When i tried it printed an extremely small snapshot of the whole page with the iframe in the middle.
Am a bit lost on this one.
The jQuery i am using is as follows:
$('table.pricing > tbody > tr > th > p.price_report > a').colorbox({
title: "Price report",
transition: "elastic",
innerWidth: "733px",
innerHeight: "699px",
opacity: "0.5",
onComplete:function(){
// Ajax call to content
// insert Print CSS into head of document
}
});
The print CSS that is loaded merely hides the body content and then displays everything under #colorbox.
Apologies all the proper code is at work.
1) I would suggest switching to the "inline" colorbox option (but you don't have to):
<script type="text/javascript">
$(document).ready(function(){
$(".pricing").colorbox({width:"733px", height:"699px", iframe:false, open:true, overlayClose:true, opacity:.5, initialWidth:"300px", initialHeight:"100px", transition:"elastic", speed:350, close:"Close", photo:false, inline:true, href:"#price_report"});
});
</script>
2) Now add your html including the javascript and code to write your printable area:
<div style='display: none'>
<div id='price_report' class='pricing'>
<script type="text/javascript">
//<!--
function ClickHereToPrint(){
try{
var oIframe = document.getElementById('ifrmPrint');
var oContent = document.getElementById('pricingPrintArea').innerHTML;
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
oDoc.write("<html><head><title>My Printable Pricing Report!</title>");
oDoc.write("<link rel='stylesheet' href='link-to-my-styles/style.css' type='text/css' />");
oDoc.write("</head></body><body onload='this.focus(); this.print();' style='text-align: left; font-size: 8pt; width: 432pt;'>");
oDoc.write("<h3>My Pricing Report</h3>");
oDoc.write(oContent + "</body></html>");
oDoc.close();
}
catch(e){
self.print();
}
}
//-->
</script>
<iframe id='ifrmPrint' src='#' style="width:0pt; height:0pt; border: none;"></iframe>
<div id="pricingPrintArea">
<div class="myreport">
<p>Hello, I am a pricing report!</p>
</div>
</div>
</div>
</div>
3) Now add the print button wherever you wish:
<div id="print_btn">
<a href="#" onclick="ClickHereToPrint();" style="cursor: pointer;">
<span class="print_btn">
Click Here To Print This Report!
</span>
</a>
</div>
Note, the blank iframe included is where the javascript will write your printable area. You will also notice in the javascript that you can add a stylesheet, inline styles, a page title and more!
Keep in mind, this process will work similar for the ajax version of the colorbox, but if you go the route of the ajax method, you will have to write the printable div and print iframe and print javascript directly to that external file.
Theoretically, anything inside the printable region div (in this example: pricingPrintArea) will print, so as-long-as you wrap that around whatever you want to print, it will do so.
Important tip: Printers all read a Web page differently so try not to rely too much on inline styles and pixel dimensions for your printable version. That is why it is a good idea to create a stylesheet specifically for the printable page.
Hopefully that answers your question. (btw, you should be able to get this method to work with the ajax method of colorbox, but I haven't tested it).