I'm trying to get a simple piece of text displayed as a link. When it is rendered it looks correct eg: http://www.google.com, but the link redirects to my project with the link appended on the end:
http://localhost:8050/brents-test-community/ru61pmlc7vry/groupplaymanager-display/h16wwislnsl/www.google.com, instead of just http://www.google.com.
This what i used:
var urlHtml = groupPlay.Url.link(groupPlay.Url);
var url = document.getElementById('GroupPlayInput_Url');
url.innerHTML = urlHtml;
The value of groupPlay.Url is a simply "www.google.com".
And this is the div:
<div style="padding-top: 5px;" id="#Html.IdFor(view => view.GroupPlayInput.Url)">
#if (Model.GroupPlayInput.Url.IsNotNullOrEmpty())
{
#Model.GroupPlayInput.Url
}
</div>
You can add http:// beside your url. This will indicate to the browser that the url is an absolute url (not a relative url).
Example : https://jsfiddle.net/nevgc71g/
Related
I have a questing about knockout not rendering html attributes properly.
I have a span tag that gets populated with data using knockout JS.
<span id="s34" data-bind="html: $parent.Branch.TextComments"></span>
TextComments is dynamic and sometimes contain text only. Other times text and < a> tags. For example:
This is text example of TextComment. Access google at Goole link. Thank you!
When the page reders, the link reders correctly as a url but when I click it, it doesn't open a new tab, it redirects the page to google instead of opening a new tab which target="_blank" should accomplish.
Any ideas?
Thanks in advance!
I was curious if it really doesnt work.
I set up this minimal code snippet and everything works as expected in my local environment
var system = {
viewModel:function (data) {
var self = this;
self.texts = ko.observableArray([
"text 21321",
'text with target blank ',
'text <a href="https://google.com" > without target blank </a> ',
'text 789'
]);
}
}
var vm = new system.viewModel();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach:texts">
<span data-bind="html:$data"></span> <br>
</div>
Test stack-snippet target-blank
So in this snippet the links do also not open correct for me, but maybe this is a snippet restriction. See the normal link i added with target="_blank" it also doesnt open in snippet. in my local environmet all the links with target="_blank" opens in a new tab while the other one does not
from a page having code(as can be seen in inspect element and not in the source code) as:
<div id="download_div" class="row" style="margin-left: 2%; margin-right: 2%">
<p id="download_sub_text" class="hide-on-small-only" style="text-align: center;">
You could also download directly by
<a onclick="ga('send', 'event', 'link', 'click_here', 'wholesale.item');"
href="http://example.com/f2c9bd13afd7a17af35ad30a2c593c7f4bea2dd347b4149">
clicking here!
</a>
I want to extract the href link. But the driver.page_source do not work as it is a part of a script, so from where do I need to extract exactly if not source code and what exactly can be the xpath here?
Also, if possible- This page triggers a file-download(download link being-"http://example.com/f2c9bd13afd7a17af35ad30a2c593c7f4bea2dd347b4149") so if this link can be captured, then that will solve my case.
First of all, to locate your link element, you use this xpath -
//p[#id = 'download_sub_text']/a
Then, to get the value of attribute, you use get_attribute() method. To get the value of the href attribute of your element -
required_url = driver.find_element_by_xpath("//p[#id = 'download_sub_text']/a").get_attribute("href")
print(required_url)
Also, if you want to get the link to which it redirects to after clicking it, you can take the current_url after clicking the button -
required_button = driver.find_element_by_xpath("//p[#id = 'download_sub_text']/a")
required_button.click()
required_url = driver.current_url
My Snippet tool allows users to save/copy code snippets in order to share them. I use html2canvas in order to display the snippet that the user has created in the console and allow them to save it.
But I have found many problems in their display on browsers other than Firefox, as you can see here (it's blurry and the letter spacing is abnormal).
Here's how I save the snippet once the user presses "Save":
// Call html2canvas with the console element
html2canvas(document.getElementsByClassName('console'), {
onrendered: function(canvas) {
var url = canvas.toDataURL()
// Set the element's URL in an img tag
var img = '<img src="' + url + '" style="border:0;"></img>'
// Open a window and display the image in it
var x = window.open();
x.document.open();
x.document.write(img);
x.document.close();
}
});
My best solution at the moment is to have the snippet saved locally and directly to the user, how may I have a specific HTML element downloaded using Javascript?
EDIT:
This is the HTML element that I wish to save, it contains the console design and a codemirror component that represents the text editor in which users type:
<div class="console">
<div class="console-header">
<div class="console-buttons">
<div class="console-button button-1"></div>
<div class="console-button button-2"></div>
<div class="console-button button-3"></div>
</div>
</div>
<div class="console-content">
<codemirror [(ngModel)]="content" [config]="config"></codemirror>
</div>
</div>
I know this is probably pretty simple but I am a novice at JavaScript.
Trying to change the image/link being displayed based on the url path.
So any page at foo.com would display an image of a dog <div id="promo"><img src="img/dog.jpg"></div>
Unless it was under a the directory foo.com/cat then <div id="promo"><img src="img/cat.jpg"></div>
Many thanks!!!
Here is an example of how you can achieve this with the markup you posted:
<div id="promo">
<a href="dog.html">
<img src="img/dog.jpg">
</a>
</div>
Now here some vanilla JavaScript that does what you need: changes the image src based on the location pathname:
var path = window.location.pathname;
var promo = document.getElementById('promo');
if(path.match(/cat/)){
promo.getElementsByTagName('img')[0].src = 'img/cat.jpg';
}
You can also view this with source with a test case here: http://jsfiddle.net/jordanandree/3yCgY/2/
I'm trying to create a custom tweet button with a popup, this part works. However, I am unable to get it to post hashtags in the text area.
Tweet content
url=http://www.mywebsite.com&text=mytweetcontent&via=mytwitterusername
In the &text= I've experimented with using mytweetcontent+#myhashtag as well as trying the URL encoding %23 (which corresponds with #); however, I am still unable to get a hashtag to appear. Any ideas on what I can do? I would prefer to have a custom image, which is why I am not using the proprietary twitter jscript button. Thanks very much for your help!
Full code for reference:
<img src="twitter-logo.png" border="0">
Edit* Response to comment
thanks for the suggestion! i didnt try with hashtag, just normal, but changing the & to ? removes the content area, code below. Top line is the result in the tweet box, below is corresponding url.
mycontent http://t.co/nKb4nWC via #myusername
http://twitter.com/intent/tweet?text=mycontent&url=http%3A%2F%2Fwww.mywebsite.com&via=myusername
http://t.co/YzrDfzX via #myusername
http://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.mywebsite.com%3Ftext%3Dmycontent&via=myusername
What's wrong with using the following?
<a href="http://twitter.com/intent/tweet?text=Text%20%23hashtag&via=JohnDoe"
onclick="return !window.open(this.href, 'tweet', 'menubar=no')">
<img src="twitter-logo.png">
</a>
Twitter
<script type="text/javascript">
$('.socialLinkTwitter').click(function (e) {
e.preventDefault();
var sTwitterShare = $(this).attr('href');
window.open(sTwitterShare,'Share','width=550,height=450');
});
</script>