If clarification is needed, please let me know. If it can't be done, please let me know this as well. I am desperately trying to figure this out still
I was following Google's Dev guide to the Share button at the following site:
https://developers.google.com/+/web/share/
and I can not seem to figure out how, if it's even possible, to use a custom icon AND use the current URL instead of having to specify a URL.
I found this section of their site that specifies an anchor tag address:
"https://plus.google.com/share?url={URL}"
This would allow me to use a custom icon (and the only way I can use a custom icon as far as I can tell) and a few other custom parameters as well. But it looks like this method requires a specified URL and, as far as I can tell, provides no method to dynamically create the link depending on the current page.
If I use the code generator at the top, it will use the current page, but it calls on a Google hosted Java Script and in addition, it is a hover link that pops up when I hover over the icon. And of course, I also can't use a custom icon with the generator either.
I've been Googling every search term I could think of and searching this site as well and I haven't been able to find anyone else asking this question as of yet. I figured after about 20-30 minutes of searching that I wasn't going to find my answer via searching, so i apologize if this has been answered.
Just some background on my experience to give an idea of where I sit: I have a decent grasp of the workings of HTML and CSS. Javascript, however, I understand very very basic theory and that's about it. I definitely intend to learn, however, as it will prove a very valuable skill.
Thank you very much!!
I think I know what needs to be done, but...I don't know how to do it (or if it would even work) :|
my share link needs to link to a script that looks at the current page's URL, and then takes that information, and creates a dynamic link from it that will take the user to the following link: https://plus.google.com/share?url={URL from query will be here}.
I think that might work...it sounds like it would. Any thoughts? If so, any simple scripts around that would do just this?
Double thanks!!
--I finally found something that works, but it uses Javascript and I don't fully understand it, just enough to tweak it. It took me forever to find this, but it works with Google Plus, Facebook, or Twitter! (and I'm sure it will work with any other website that supplies a Share Link that requires a specified URL)
Here it is, I'm still looking for a better solution, but this does exactly what I was looking for:
<a href="javascript:(
function(){
var w=480;var h=380;
var x=Number((window.screen.width-w)/2);
var y=Number((window.screen.height-h)/2);
window.open('https://plus.google.com/share?url='+encodeURIComponent(location.href)+'
&title='+encodeURIComponent(document.title),'','width='+w+',height='+h+',left='+x+',top='+y +',
scrollbars=no');
})();" style="background: url(/wp-content/themes/HTML5/images/googleplus.png) no-repeat scroll left center transparent;">
Share to Google+</a>
EDIT! After spending some months learning Javascript, I've built a solution that is much better than that which is provided below. I'll leave my original answer, however, I want to place this better solution at the top.
This solution should work on ANY social media platform that gives you a custom share URL (that is to say, a url that allows you to manually type in an address to share).
Here is how it all works (and if anyone has any suggestions or tweaks that have more experience with JS, please let me know).
I assign variables to the document.URL and document.titleproperties.
I write a named function (I called mine, socialShare) that is set to run via an anonymous function on the window.onloadevent.
The socialShare function assigns variables to the location of my social button's within the HTML. In my case, I used IDs to locate the elements. The purpose of these variables is purely for aesthetics (I use these variables to re-write the the HTML code dynamically, so that when you hover over the share button, it displays the correct URL for sharing the current page you are on)
var fbShare = document.getElementById("fbShare");
var gplusShare = document.getElementById("gplusShare");
twitterShare = document.getElementById("twitterShare");
I then write three separate anonymous functions, one for each social media platform. Each function has two statements. The functions work as follows: the first part is the variable assigned to the location of the HTML element with the ID fbShare. The second part tells it to run the function when that element is clicked; .onclick. The third part is the anonymous function that will run when that element is clicked. The first statement of this function will open a new window; window.open; and in that new window, it will open the URL that is specified by feeding the window.open method parameters. The parameters are as follows (URL,name,specs) where URL is the URL you want to share, name is optional and left blank as seen by the empty set of quotes, and finally specs is where you specify attributes of the window (IE: width and height). The first parameter, the URL: ("https://www.facebook.com/sharer.php?u="+currentURL, currentURL is the global variable that was assigned earlier and will place whatever the current documents URL is, in place of currentURL. The second parameter, the name: "", This is left blank, as it is optional. The third parameter, the specs: "height=368,width=600,left=100,top=100,menubar=0"); These are a comma-seperated list of items. In my case, I've specified a height, width, and the location of the window, as well as disabled the menubar. Finally, the second statement, return false; tells the browser NOT to follow the link inside the HTML code. If this was not specified, then the browswer would follow the URL in the HTML, AND open a new window. For more information on the window.open method, please see the link at the bottom of this new answer.
fbShare.onclick = function() {
window.open("https://www.facebook.com/sharer.php?u="+currentURL,"","height=368,width=600,left=100,top=100,menubar=0");
return false;
}
gplusShare.onclick = function() {
window.open("https://plus.google.com/share?url="+currentURL,"","height=550,width=525,left=100,top=100,menubar=0");
return false;
}
twitterShare.onclick = function() {
window.open("https://twitter.com/share?url="+currentURL+"&text="+currentTitle,"","height=260,width=500,left=100,top=100,menubar=0");
return false;
}
And finally, I modify the HTML href elements of each social media button so that when the user hovers over the share buttons, they see the correct Share URL displayed in their browsers status bar. The first part of this statement grabs the element id, fbShare and the second part tells it to set an attribute, .setAttribute. Then we pass in the attribute name that we want to change, ("href", in this case, and then we pass in what we would like the new attribute value to be, "http://www.facebook.com/sharer.php?u="+currentURL); currentURL is the same here, as earlier. It is the variable that holds the value for whatever the current page's URL is.
fbShare.setAttribute("href","http://www.facebook.com/sharer.php?u="+currentURL);
gplusShare.setAttribute("href","https://plus.google.com/share?url="+currentURL);
twitterShare.setAttribute("href","https://twitter.com/share?url="+currentURL+"&text="+currentTitle);
That's about all there is to it! I hope I wrote this well and I hope it is relatively easy to follow. If any pros out there have any suggestions, please feel free to toss in and give your advice! :)
My JS file
http://jrltest.host-ed.me/_js/share.js
Link to information on the window.open method at w3schools.com
http://www.w3schools.com/jsref/met_win_open.asp
Link to information on the .setattribute method at w3schools.com
http://www.w3schools.com/jsref/met_element_setattribute.asp
OLD ANSWER: I figured I'd add this as an answer. It does the trick and solves the exact problem that I had. The URL after 'window.open' would be the social media's Share Link (in the case of the example, it's google plus' Share Link. There are a few variables that can be either modified or removed. Anyone that's good with scripting could probably create a PHP version (which I would LOVE) or modify it to better suite their needs. At any rate, I hope this will help someone out!
<a href="javascript:(
function(){
var w=480;var h=380;
var x=Number((window.screen.width-w)/2);
var y=Number((window.screen.height-h)/2);
window.open('https://plus.google.com/share?url='+encodeURIComponent(location.href)+'
&title='+encodeURIComponent(document.title),'','width='+w+',height='+h+',left='+x+',top='+y+',
scrollbars=no');
})();" style="background: url(/wp-content/themes/HTML5/images/googleplus.png) no-repeat scroll left center transparent;">
Share to Google+</a>
Native Window Open function its not a good idea, browsers like Mozilla and Chrome block pop up. I think its better use a plugin to open a new windows with the share url, like jquery popup plugin. Work very fine for me and browser cant block it.
Copy an paste into a new js file like original name: 'jquery.popup.js'
jQuery.fn.popup = function(options) {
var defaults = {
width: screen.width/2,
height: screen.height/2,
titlebar: false,
status: false,
resizable: true,
toolbar: false,
scrollbars: true,
menubar: false
};
var options = jQuery.extend(defaults, options);
Boolean.prototype.setProperty = function() {
if (this == true) { return "yes"; } else { return "no"; }
};
jQuery(this).click( function() {
var target = this.target;
var href = this.href;
var posY = (parseInt(screen.height/2)) - (parseInt(options.height/2));
var posX = (parseInt(screen.width/2)) - (parseInt(options.width/2));
var win = window.open(href, target, 'titlebar=' + options.titlebar.setProperty() + ', screenX='+ posX +', screenY='+ posY +', left='+ posX +', top='+ posY +', status=' + options.status.setProperty() + ', resizable=' + options.resizable.setProperty() + ', toolbar=' + options.toolbar.setProperty() + ', scrollbars=' + options.scrollbars.setProperty() + ', menubar=' + options.menubar.setProperty() + ', width='+ options.width +', height='+ options.height);
win.focus();
return false;
});
return this;
};
USAGE:
<script src="jquery.last.js"></script>
<script src="jquery.popup.js"></script>
<script>
jQuery(function(){
//simple load
jQuery(".popupLink").popup({ width: 640, height: 480 });
});
</script>
<a class='popupLink' href="https://www.facebook.com/share.php?u=<?php echo URL;?>">Share Facebook</a>
ALSO YOU CAN PASS OPTIONS LIKE THE PLUGIN EXAMPLE OPTIONS
<script>
jQuery(".popupLink").popup({ width: 640, height: 480, resizable: false, menubar: true });
</script>
The author website dont exist any more. This are the information that comes with the plugin comments
/*
* jQuery popup v1 - A jQuery popup plugin.
* By Jordan Thomas - http://labs.wondergroup.com
* Licensed under the do whatever you want to license.
* If you like, keep this message intact so
* someone else can find the origin.
*/
You can also use PHP to resize the window but here is the PHP version... Have fun :)
See Also: PHP - Getting Current URL
<?
echo '<a href="https://plus.google.com/share?url='.$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI].'"
target="_blank"><img src="images/google-custom-icon.png"></a>';
?>
While creating select option in dojo
dojo.byId("it1").add(dojo.create("option", { value:'1',innerHTML:'Iteration 1' }));
I got a Invalid argument error in IE8, rest of the browsers works fine.
This is due to that browsers has implemented sort of a fail-over mechanism. Or maybe even the standards has changed, not sure which it is.
Fact remains, that in older browsers, the option element had an odd implementation. Consider the following programmatic creation of a new option DOM:
text='Iteration 1';
value=1;
defaultSelected = false;
selected=false;
document.getElementById('myselect').options.add(
new Option(text, value, defaultSelected ,selected)
);
See http://msdn.microsoft.com/en-us/library/ie/dd757810(v=vs.85).aspx
The API also has arguments, indicating if option is selected or not. But the interesting part here is the parameter text
It roughly translates into
var opt = document.createElement('OPTION');
opt.text = text;
opt.value = value;
You will find, that programmatically created selects (using innerHTML approach) will not work properly in IE prior to and including IE8. The element is simply not connected to its parent form and thus, not sent to server on submit.
I made a template and there is a <select dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber" id="selectPageNumber">tag with id and dojoAttachPoint be "selectPageNumber". I want to populate it with options upon create so I add some code to the postCreate function:
var select = dijit.byId("selectPageNumber");
or
var select = this.selectPageNumber;
but I always have select being undefined.
What am I doing wrong?
UPD:
The problem with element has been solved spontaneously and I didn't got the solution. I used neither dojo.addOnLoad nor widgetsInTemplate : true, it just started to work. But I have found the same problem again: when I added another tag I can't get it!
HTML:
<select class="ctrl2" dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber" id="selectPageNumber">
</select>
<select class="ctrl2" dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber2" id="selectPageNumber2">
</select>
widget:
alert(this.selectPageNumber);
alert(this.selectPageNumber2);
first alert shows that this.selectPageNumber is a valid object and the this.selectPageNumber2 is null.
widgetsInTemplate is set to false.
all the code is within dojo.addOnLoad()
dojo.require() is valid
I am using IBM Rational Application Developer (if it is essential).
WHY it is so different?
Based on your syntax, I am assuming that you are using 1.6. Your question mentions template and postCreate, so i am assuming that you have created a widget that acts as a composite (widgets in the template).
Assuming 1.6, in your widget, have you set the widgetsInTemplate property to true. This will tell the parser that your template has widgets that need to be parsed when creating the widget.
http://dojotoolkit.org/documentation/tutorials/1.6/templated/
I would remove the id from the select. Having the id means that you can only instantiate your widget once per page. You should use this.selectPageNumber within your widget to access the select widget.
If you are using 1.7 or greater, instead of setting the widgets widgetsInTemplate property, you should use the dijit._WidgetsInTemplateMixin mixin.
http://dojotoolkit.org/reference-guide/1.8/dijit/_WidgetsInTemplateMixin.html
Depending on when dijit.byId() is being called, the widget may not have been created yet. Try using dojo.addOnLoad()
dojo.addOnLoad(function() {
var select = dijit.byId("selectPageNumber");
});
I came close to the solution: it seems like there is a some sort of RAD "caching" that doesn't respond to changes made in html code.
Ways to purge the workspace environment with RAD (based on Eclipse) might be a solution.
I am using the selenium getAttribute("style") method on the following id element:-
<div id="ntsDiv_1" style="width: 250px; text-align: left; white-space: normal; top: 1090px; left: 131px; visibility: hidden;" class="mlt-pop-container">
but the API is returning only the half of the value. It is returning width: 250px; text-align: left; white-space: normal; and the remaning portion of the style is clipped.
I'm trying to extract the value of the visibility, but the method is not returning the complete value of style. Hence, i am unable to determine the correct value of visibility.
I executed System.out.println("Style is:- "+super.getElement(NEXTAG_STORES_DIV).getAttribute("style"));
NEXTAG_STORES_DIV corresponds to the xpath of the id element, and super.getElement extracts element by xpath
Please help me out!!
I just tried this with Selenium 2.30.0 and it works fine, the whole attribute is returned.
Try the following things (all the examples assume element is the WebElement you need to test):
Make really sure only a part of the attribute is returned. Aren't you just printing it into console? Many consoles have a limited line length. Try setting your console to show long lines. Check programatically the length of the returned value, or try evaluating
element.getAttribute("style").contains("visibility")
Try upgrading your Selenium library, if you can. I am not aware of any bug related to attribute getting, but there might have been some which is now (with version 2.30.0) solved.
Try it in a different browser / OS / architecture. If it works somewhere, you'll know it's an issue of a particular browser / driver / OS / architecture / whatever and you might be able to focus it down and either fix it or file a bug.
If you simply want to know whether an element is visible or not, the correct and generally preferred way is to call
element.isDisplayed()
This method takes care of all the rules you might need to inspect in order to determine whether it actually is visible or not.
If the style value changes dynamically on the page (i.e. it's not statically written in the source code of the page), WebDriver can't really see it as it doesn't pick up dynamic changes. Try accessing the value via JavaScript:
if (!driver instanceof JavascriptExecutor) {
throw new IllegalStateException("JavaScript not enabled for this driver!");
}
JavascriptExecutor js = (JavascriptExecutor)driver;
String styleAttribute = (String)js.executeScript("return arguments[0].style", element);
If you actually need to get the computed value of the CSS visibility attribute that is actually used by the browser and not the one in the style atribute (if there either isn't any or is somehow overridden), you need to use the JavaScript's getComputedStyle() method. One way (described by this article on quirksmode.org) is this:
var elem = arguments[0];
if (elem.currentStyle) {
var vis = elem.currentStyle['visibility'];
} else {
var vis = document.defaultView.getComputedStyle(elem, null).getPropertyValue('visibility');
}
return vis;
Again, this should be invoked via
String visibility = (String)js.executeScript(here_goes_the_whole_script, element);
The TableContainer is declared in HTML like so:
<div dojoType="dojox.layout.TableContainer" jsId="myTable" id="myTable" cols="1">
<!-- stuff -->
</div>
I tried adding a row containing a TextBox programmatically like so:
var tb = new dijit.form.TextBox({
label: "Name"
});
myTable.addChild(tb);
The TextBox will be displayed below the table and no labels are shown. How can I place new rows with label inside the table?
I'm pretty sure this is a bug. It looks like once the TableContainer has been started the first time, adding children wont trigger a new layout() etc. A quick but hideous workaround would be to make the TableContainer "forget" that it has already been initialized and started, and then run startup() manually.
var tb = new dijit.form.TextBox({
label: "Name"
});
myTable.addChild(tb);
myTable._initialized = false;
myTable._started = false;
myTable.startup();
I take no responsibility for any unforeseen oddities this may cause though :-) Normally manipulating private members (the ones starting with an underscore) is a bad idea.
yeah there is some issue with tablecontainer ,the suggested work around for this issue would be
<div id='myTable'></div>
declare the div in the HTML but convert it into tableContainer in script then u can have the use of both the ways avoiding the bug
initialize the table container in script like
var myTable=new dojox.layout.TableCOntainer({cols:1},"myTable");
don't forget to startup our table container after adding the childrens
After this you can easily add any number of childs normally