We Keep Coding

jquery append a href materialize modal not working

hello i have this problem where i need to append a href tag with materialize modal inside it
so this is the code
<a href='#modalcreatechecklistitem' class='modal-trigger'>Add an item</a>
i have no problem when i just put it in my html
however, when i tried to append using jquery
$("#ajaxChecklist").append("<a href='#modalcreatechecklistitem' class='modal-trigger'>Add an item</a>");
it is not working
UPDATE :
class modal-trigger is not loaded, is this from jquery or my css?
it is working fine when i code in my html file
ANSWER:
jquery doesnt allow you to append a materialize class to an element.
To do this action, you need to re-initialize the materialize element or function
in this case, i did a function on the #modalcreatechecklistitem
the funtion will re-intialize the materialize modal and open the modal

you working is working fine, i just checked in fiddle also
https://jsfiddle.net/jvk3/8nfbxa1p/1/
may be you placed inside the table div or similar to parent

Two important questions:
1 - Is it code running in document.ready?
2 - Is there element with this id ajaxChecklist on the page?

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.

How to get work easyui js on divs which are written by another js code

I have an javascript class that produces html code. I can produce html code properly, without any error. In this time I am producing some divs which are supposed to be accoridon layout for easyui implemetation. However when I produce my accordion divs, easyui doesn't see them and does not anything on them.
I tried to include my producer class both before and after easyui scripts. But it does not work.
If I have to be more clear I will write some code but consider this as pseudocode not real code, this code is only for me to express myself better:
For example this is my acordion div:
<div class="easyui-accordion" id="accordion2" href="#"><div>
And this is my javascript code:
var myContent="<a href="#" class="easyui-linkbutton" plain="true"
id="mydivid">OrtoFoto TVK</a>";
document.getElementById("acordion2").innerHTML=myContent;
In this example the button elementinside div#accordion2 is displayed on browser as I set in js, but easyui does not effect it.
When I don't include my producer class and write my html like this easyui works on the div:
<div class="easyui-accordion" id="accordion2" href="#">
<a href="#" class="easyui-linkbutton" plain="true" id="mydivid">
OrtoFoto TVK
</a>
<div>
How can solve this? Thanks...

Here is a working example. When you are working with strings you have to be careful if you start with a double quotation and you need another set of double quotation in the string you have to escape them. If you look at the string that you have you see how it is not one solid color its red and gray but mine is all red. That is a hint that your string is not a string.
However all i did was change the first and last to single quotes.
var myContent='OrtoFoto TVK';
I have never used easy-ui but what i noticed was that if you do not put a 'title' attribute within a div that is nested inside your accordion it does not show the nested elements.
So after changing the string i added a div with a title
var myContent='<div title="test">OrtoFoto TVK</div>';
And that seems to work how you wanted to i think. Here is a working example in jsBin.
http://jsbin.com/#/ocIFosox/1/edit

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

How to show mouseover tooltip on selected word on web page using javascript, conditionally?

How to show mouseover tooltip on selected word on web page using javascript? i want to set some conditions
For example:
If page has text <p> I'm Web Designer </p> inside <div id=example> then it should show tool tip on Designer but tooltip should not be shown for designer without adding any span to Designer and designer. i want to select autuomatically
I have to set include and exclude keywords to pick, or notpic tool tip . and matter of all tooltips for all i want to write in another html file not in same page.

You have to do it using css and javascript but following is the simple thing you can do for same result.
<a title="Designer" href="javascript:void(0);" >Designer</a>
Designer

Use the following jQuery to wrap an anchor tag around the word "designer" (inspiration found here):
$('#example').html(
$('#example')
.html()
.replace(
/(designer)/g,
'$1'
)
);
Then use (for example) the aToolTip library to display the tip.
Here's a Fiddle: http://jsfiddle.net/m2x6J/