img tag within title attribute - javascript

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

Related

Updating a simple jQuery / CSS code

I was hoping someone could help me out with this simple question: I’ve just started to learn jQuery and found a code to show hidden text after selecting an item.
I’d like to update it so that:
a.) The selected item is bold
b.) I can add placeholder text instead of starting off with a blank hidden text field
I foolishly assumed I could solve a.) by using the :active property in css, but that only works as long as the link is clicked on. (As soon as you release the mouse button it’s gone.) Just like b.), this is probably only possible by using jQuery as well? If so, would be really great if you could show me how to solve it. :)
The codes: http://jsfiddle.net/KUtY5/1/
JS
$(document).ready(function(){
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide();
$("#menu_container #menu_"+id[1]).show();
});
});
CSS
#menu_container {
width: 650px;
height: auto;
padding-left: 30px;
}
#menu_container div {
display:none;
}
HTML
<div id='nav'>
<a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a id="show_entrees">Entrees</a>
</div>
<div id="menu_container">
<div id="menu_apps">
Content of the App Section Here
</div>
<div id="menu_soups">
Content of the Soups Section Here
</div>
<div id="menu_entrees">
Content of the Entrees Section Here
</div>
</div>
Updated fiddle
You can realize a) using a custom class bold for example and the following code :
CSS
.bold{ font-weight: bold;}
JS
$(this).addClass('bold').siblings('a').removeClass('bold');
For b) I can't find any textfield in your code.
Hope this helps.
I have added some extra lines to your code and you can check it from here http://jsfiddle.net/KUtY5/483/.
You bold like this
$("#nav a").css("font-weight", 400); // First you make them thin
$(this).css("font-weight", 800); // Than you make them bold
You put placeholder like this
<div id="placeholder">
Placeholder
</div>
$("#placeholder").hide();
On the other hand I recommend you not to hide menu container. Rather hide the elements inside the menu_container. So you can put a plcaeholder in menu container and you can hide it.
To figure this out 2 questions must be asked / solved
how do you normally make text bold on a page... css right?
where do you want those styles to be defined? There are 2 places:
a. You can define it inside the javascript.
b. You can define it inside the projects css through normal methods (inline, external, embedded).
What's the difference? If you define it inside the javascript the code is self-contained. What i mean by that is you can copy/paste the JS code from one project to the next and you don't need to worry about copying related styles from the stylesheets or other sources because it's all in the JQuery that you've written.
In contrast if you define it outside the javascript in the regular places the code may not be self-contained however some find it easier to manage in the scope of that particular project because all your css is contained in one place (external stylesheet typically).
If you want to take option a, see the .css() method
If you want to take option b, see the style manipulation (toggle class in particular)
Note the examples in the above references should get you 90% of the way to understanding it.
Some final words. Learn Jquery, but i advise you to stay away from it as much as possible because it implements DOM thrashing instead of DOM caching (sizzle engine).
This video series will briefly go into why Jquery sucks for performance in the first video and the rest of the series is about how to create modular vanilla JS.
JQuery goes back and searches the DOM every time you need to make a change that is what
$.(*element*) is doing instead of just caching it.
The more nodes you have in the DOM the more processing power is used searching (because it has to go through the entire tree).
Then on top of that the more elements you have to make changes to (say if you use a css class selector) you have to add even more processing on top of that.
All this is fine if you're on a desktop, but what about a mobile platform? Where would you get all this processing power from?... It doesn't exist.

div in headline tag autocloses

I've got this HTML-Content. I knew that this is not correct HTML but I can't change it because it's user generated by a WYSIWG-Editor and this mistake was done hundered of times by users:
<div>
<H2 style="COLOR: #0000ff"> <DIV align=left>TEXT<br /></H2></STRONG>
</DIV>
</div><br />
Problem is that the Div AFTER the H2 Tag is closed AFTER the closing Tag from the H2.
What happens is that the H2 autocloses the enclosed DIV and the original closes the Div above.
As I can't change the Sourcecode in those masses of Content-Files, is there a way to prevent this behaviour with CSS???
CSS won't fix this. If this is generated by the editor specifically then you need a new editor. If you're setting content in JavaScript based on the content of an editable region you might be in luck. Browsers auto-close tags as the content is assigned. Say you have JavaScript to handle that content, and you're assigning that HTML to an element. When it's assigned to the element it will add the closing tag, and then when you go to programmatically close the tag at the correct time you'll get the duplicate close. I found when I do this I need to store the HTML into a string var temporarily, and then assign the HTML when it's all complete. If you need a quick lightweight html5 editor I have one at http://www.makrit.net/5edit

Can I create an HTML pop up that do not use Javascript? or can I put the Javascript into the <body> section?

I have to create a pop up that will be show when the user click on a link.
I think that I can not use Javascript because I have no access to the full template so I can't put the javascript into the <head></head> section of the page (I can't modify it)
Can I create a pure HTML pop up withous use Javascript or alternatively can I declare my Javascript into the <body></body> of my html code and not into the <head></head> section?
Tnx
Andrea
Yes, you can do this in pure html and css. The trick is to use the :target pseudo selector. Rules with :target will match when the url anchor matches a particular id. You can update the url anchor by creating a plain anchor link. This does have a slight jumping effect because we're using anchors, but it is possible.
So for example: http://jsfiddle.net/X49zJ/1/
Click to Trigger The Modal
<div id="modal"> I am a Hidden Modal</div>
And CSS:
#modal {
display: none;
width: 300px;
height: 100px;
border:1px solid #CCC;
background:#EEE;
}
#modal:target {
display: block;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/:target for more information on the :target and also this demo for a much prettier lightbox.
For more flexibility you can always add javascript. If your javascript is non-essential, it's generally best practice to put javascript at the bottom of the body, or add the script tag with the async attribute so it doesn't pause rendering of content when it loads.
You can do this with HTML and CSS, like so.
To answer your second question, generally it's possible to put Javascript in the <body> section of your page as well.
You cannot do this without javascript, however you can put script tags literally anywhere in your page and it should work, so try this.
<div>
<h1 id="test">New Content</h1>
<script>
var test = document.getElementById('test');
test.addEventListener('click', function() {
alert('clicked');
});
</script>
</div>
It's permittable to use target="_blank" in the <a> tag if you're using HTML5, which will generally make the link open in a new tab in modern browsers. This is preferred by quite a lot of users so you may want to consider this.
Putting JavaScript into the body of the page should be perfectly fine if you have complete control over the HTML. It is put within simple <script> tags, after all — there's no need for it to be in the <head>.
If whatever CMS you're using filters out <script> tags but you still have control over HTML attributes, you might be able to get away with putting JavaScript in an onclick attribute:
Link
Here you can find a walk-through http://dsheiko.com/weblog/fancy-modal-windows-without-javascript/
It opens pop-up and blurs the modal underlay. Here how it looks codepen.io/dsheiko/pen/jCcld
It also describes how you can enhance it with such goodies as closing on Esc press and by clicking outside modal content and provides JavaScript fallback for IE8.

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

Scroll to text link

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.

Categories