I am a Template developer,
i created one script for footer credit link, so that the user cannot remove the footer link,
However, i am bit confuse why the anchor is not working ?
here is the script.
<script>
window.onload = function() {
var e = document.getElementById("credit");
e.setAttribute("href", "http://www.example.com/");
e.setAttribute("ref", "dofollow");
e.setAttribute("title", "Free Templates");
e.innerHTML = "Example"
}
</script>
As you see the above script, i included that in my template and also i add the credit div in footer area like this:
<div id="credit"></div>
Now when i open my template, It seems as plain texts.
Problem: Why the Example seems as plain texts it is not anchor. how to make it clickable so that it should go to example.com if click.
Fiddle: https://jsfiddle.net/copyblogger/dkt2jdxt/5/
Note: please share full coding with fiddle example.
Try this:
<a id="credit"></a>
You've been setting attributes that a div tag does not have, but an a tag does.
The href attribute is only supported on the following elements: <a>, <area>, <base>, <link>.
You could wrap the <div> in an <a> element and then the entire div would be clickable.
Related
I wonder that editorjs has feature that wraps link with anchor? I think this is important for writers etc. Are there any workaround solution for that?
You can add "inlineToolbar" in EditorjsTools.js file.
Ex.
const Editor_js_tools = {
paragraph : {
class : Paragraph,
inlineToolbar : true
}
}
The editor does not provide this functionality. In that case, your link is merely text inside a paragraph. If you want to show inline URLs as links you will have to convert them to anchor elements yourself, maybe with a custom Paragraph class.
If you want this to work in every block, you should try to detect the link in any text property of every block and wrap it in an anchor element with the corresponding href. This should work fine as editorjs assumes that inline content inside blocks may have html tags as <a>, <b> or <i>. Also, inline tools should detect your anchor tags and work with them with no problem.
I would like to append an anchor text in an a tag using jquery. Normally I can make an a tag look like this
<a href="#" >Hey</a>
and Hey is the anchor text. But what I want to do is just have
and then use a javascript file running in the background append Hey as an anchor text to that link. How can I get that done?
EDIT
This is what I tried to do but it didn't work.
$('hey').appendTo('.chat');
Where chat was the class name of the a tag.
$('<p>Hey</p>').appendTo('.chat');
That didn't work as well.
But thanks anyway guys. This code works
$('.chat').html('Hey');
Seeing that you tagged jQuery in the question:
$('a').html('Hey');
Give your anchor tag an id (assuming you want to add "hey" to a specific anchor) and then simply append with jQuery.
like so:
HTML:
<a href="#" id='link1'></a>
jQuery:
$("#link1").append("hey");
In javascript
var anchor = document.getElementById('something');
anchor.innerHTML += "some text";
I have a div with an image and a link in it.
Is it possible that on page load, I can somehow find the href of the link and apply that the anchor tag of the image?
I know this may seem like a strange request, i jsut asking if it can be done, and if so, how?
http://jsfiddle.net/fFgwb/
Sorry everyone, I want the image to be wrapped in an anchor tag, witht he same href as the 'continue reading' link
Still making assumptions about positioning of the elements, but the basics are below. Its very simple to do this in pure JS without needing to include jQuery.
Live Demo
var link = document.querySelectorAll('.card-prod a');
link[0].href = link[1].href;
try this:
$(document).ready(function(){
$("#theDiv").find("a").attr("href", $('img').attr('src'));
});
updated:
$(document).ready(function(){
$("#anchor").attr("href", $('#continue').attr('href'));
});
http://jsfiddle.net/fFgwb/5/
so, you should add classes like .divs to divs and other classes to anchor links:
$(document).ready(function(){
$(".divs").each(function(){
$(this).find("a").hasClass("anchor").attr("href", $(this).find("a").hasClass("continue").attr('href'))
});
});
I have one area of space and two body's of text to show. I have two "hyperlinks" above this area and would like to use those to show/hide the text below. Upon first loading the page, nothing will be showing except for the two links. When you click one link it shows the body of text. When you click the other link it will hide the previous body of text and show the new text. There are only two hyperlinks, but I would like for the user to be able to toggle back and forth at their convenience. Is this possible? Previously I was using javascript to unhide the text because they were in two different areas. I am not too experienced with writing code. I have found some other answers on this topic useful but most of them use buttons and on click listeners. Is there a way to do this using a hyperlink? Code examples are very much appreciated!
You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?
so your html will contain:
<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>
Your CSS would contain:
div.hide { display:none; [your properties]; }
div.show { [your properties]; }
and the your JS would look something like this:
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
Does this help at all?
<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>
in javascript you can do this if you use jQuery:
function myLinkButtonClick()
{
$("#myDiv").hide();
}
or
function myLinkButtonClick()
{
$("#myDiv").show();
}
Alternatively you can do .toggle
function myLinkButtonClick()
{
$("#myDiv").toggle();
}
Many will agree that using anchor tags to execute Javascript (and do nothing else) is a little on the messy side, since, among other things, it generates a hash tag in the address bar which can confuse users. That isn't to say that they don't have their place in JS execution.
It is very possible to achieve this however. Here is one possible solution:
Link1
Link2
<div id="div1">Text1</div>
<div id="div2" style="display:none;">Text2</div>
<script>
var currentDiv = document.getElementById("div1");
function show(divID) {
var div = document.getElementById(divID);
currentDiv.style.display = "none";
div.style.display = "block";
currentDiv = div;
}
</script>
The script tag defines a variable and a function: currentDiv, which references the currently displayed div element and a show function, which is used for hiding the currently displayed div and showing a new one.
The anchor tags at the top, when clicked, call the show function, replacing the currently shown element with the one the anchor tag specifies.
In order to get elements to show/hide, the code changes the element's CSS display attribute. A value of block shows the div element, and a value of none hides it. The second div has its display property set to none when the page loads. Javascript will change this attribute when a link is clicked.
No, you do not need JQuery to do this, but it can help.
There's a nice jQuery script that does something along these lines, have a look to see if it's any good for you:
http://api.jquery.com/slideToggle/
This is possible, but a more user friendly way of doing this would be with something like jquery tabs. It's very easy to do it with jquery UI's tab feature, it's all HTML markup with a script that just runs .tabs(); as the function on the ID of the tab element.
Here is a link: Jquery Tabs
Tabs would be the best way to do this. There's plenty of tutorials around for jQuery tabs - here's a fairly basic one which outlines the concepts pretty well, and here's a more advanced one (which goes into using CSS to generate rounded corners on tabs).
What I would like to do is change the content of a div based on the different links clicked on the same page. Can anyone point me in the correct direction? AFAIK it could be dangerous to insert scripts directly into a page, changing text works okay but it seems I'm not sure about scripts. The content of the scripts are embed codes for video streaming. I realise this may not be the right way to go about it. My attempt won't work because of escaping the '<,>' characters and passing the parameter only seems to accept text with no spaces.
The way I've attempted it is as follows (in pseudocode);
function changeVideo(script){ div.innerhtml=script;}
then links that change the content of the div;
<a href='#' onclick=changeVideo('<iframe src=justin.tv etc..></iframe>')>
<a href='#' onclick=changeVideo('<iframe src=ustream.tv etc..></iframe>')>
You could drop the use of JavaScript and create an iFrame with a specified name to host the content; while giving the links a target tag. Thus making any links with the target tag specified appear within the named iFrame.
However if you insist upon using JavaScript you could consider the use of AJAX.
I suggest you to locate your a elements with unobstrusive Javascript, with getElementById() for example.
Once you have got them in variables like, lets say, a1 and a2, and the iFrame is in variable iframe do a code like this.
// ...a1 and a2 are anchors and iframe is the frame.
var srcSwitch = function(e)
{
e.preventDefault(); // this will prevent the anchor from redirecting you
iframe.src = this.src; // this changes the iFrameās source
};
a1.addEventListener('click', srcSwitch, 1);
a2.addEventListener('click', srcSwitch, 1); // and we register event listeners.
With this code, there is no need to insert Javascript within HTML attributes and you must only put the script URL in the anchors SRC attributes.
Tell me how it goes, greetings.
I may have generalised the question too much.
So I want to embed a stream on clicking a link. If the link is something like a proper URL
http://Jimey.tv/mystream
the iframe works, but loads the whole page. But I want to use the stream embed code to get just the player
The embed code looks similar to;
<script type = text/javascript> channel='mychannel' w='620' h='400'</script><script type=text/javascript> src="jimmy.tv/embed.js></script>
My original JavaScript method doesn't work because of escaping the < characters, and passing the embedcode seems to be problamatic. Hopefully I've made this a bit clearer?
<script>
iframe1 = '<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=xenema&popout_chat=true" height="301" width="221"></iframe>'
</script>
link 1
link 2
<div id="videos">diiiiv</div>