Scroll to text link - javascript

I would like to make a link that finds some text and scrolls to that point. I can't add span or div tags.
I have found this and ideally I would like to turn it into a link and add animation. Thanks
$(window).scrollTop($("*:contains('Are you a Lib Dem or Tory'):last").offset().top);
Original stackoverflow question

It seems to me that this is the sort of thing a standard <a> tag does already without JavaScript, if you can add an <a name="jumppoint"> tag around or at the start of that text and then another <a href="#jumppoint"> tag where you want your visible link. You could insert such an <a> dynamically with jQuery.
But if you're determined to use that code you can add a link as follows:
Your link text here
Of course that's kind of ugly so you'd probably be better off creating a function:
Your link text here
function findLink() {
$(window).scrollTop($("*:contains('Are you a Lib Dem or Tory'):last").offset().top);
}
If you want some animation add it in the findLink() function.

Related

Editor.js links don't have anchor tag

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.

JavaScript DIV Editing Destroys Functionality of Other Elements

So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');

Current menu item

I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.

img tag within title attribute

I have read this question: How to add image tag inside title attribute of an anchor tag? and got only one answer: "imposible". However, I saw they can do it in this page: http://truyen.vnsharing.net/Nhom/GoldenSun---yurivn-net
I viewed the page's source and got:
<a href="/Truyen/Citrus-Saburo-Uta?id=7048" title='
<img width="120" height="165" src="http://truyen4.vnsharing.net/Uploads4/Etc/5-1-2013/12456468861citrus_ch01_02-03.jpg" style="float: left; padding-right: 10px" />
<div style="float: left; width: 300px">
<a class="bigChar" href="/Truyen/Citrus-Saburo-Uta">Citrus (Saburouta)</a>
<p>
Nhân vật chính Yuzuko, ngay ngày đầu tiên chuyển trường đã đụng mặt và không mấy cảm tình với Mei - hội trưởng hội học sinh ở trường mới, trong ...
</p>
</div>'>
Citrus (Saburouta)</a>
but the image was not displayed when I put those html code on my website. So how could they do that? Are they using some js script, or something like that?
As other have mentioned you cannot place HTML content inside of "title" attribute - it has to be something custom.
For pure CSS solution (that does not involve JavaScript and mouse-over events) you can place the DIV with tooltip content next to your link, set its style to "display: none" and give your anchors style like
a:hover + div {
display: block !important
}
this will select DIV adjuncted to link and make it visible, but only when you hover over link. You can make it more granular by targeting specific links instead of all of them as the code above.
Here is the demo: http://jsfiddle.net/4WZvL/
To quote the accepted answer to the question you linked to
You need to use custom tooltip look-a-like effect with IMG insdie DIV and on mouseHover event.
They use a custom tooltip look-a-like effect.
The image tag in that title attribute is encoded. Given this, you can place any string you want in the title tag of an anchor, it doesn't mean it's a good idea at all though. You can use javascript to pull the proper image url from any data attribute you set and achieve the same effect so long as you know how to use that url in a logical way. At least that way you would be following some kind of standard and not just abusing the intention of html standards to pull off some fancy tricks.
Juhana answered your question. But to extend the notion, you can easily use data attributes, id's, and classes to set hidden or otherwise referenced html elements for whatever you need. You can hide elements with css and then unhide them with javascript if the desired effect is to pop up that block with the images from the link you provided.
Someone may provide an example if you specify your exact needs and show what you have tried to solve it yourself.
That HTML isn't valid, and although it might be possible it doesn't mean you should do it. Some browsers probably won't display the image correctly.
Use one of the thousands of Javascript tooltip plugins instead. Here's loads for jQuery: https://www.google.co.uk/search?q=jquery+tooltip+plugin

Show/Hide On Click

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).

Categories