We Keep Coding

mouse over "a" element to display "p" element on page

could someone please write me some javaScript to show how I can mouse over an "a href" element to display a "p" element paragraph on the page.
I have the paragraph displayed:none with css; I want to associate the mouse over of a link to display the paragraph.
cheers

You dont need to use JS for this. You can do this using css also.
<a href="#link" class="hoverOn">
<p class="hoverContent">This is hover content</p>
</a>
<style>
p.hoverContent{
display:none;
}
a.hoverOn:hover p.hoverContent{
display:block !important;
}
</style>

You can use the jQuery .hover() method.
HTML
Link Hover
<p id="para">Hidden text goes here</p>
JS
$("#mousehoverhere").hover(
function() {
/* Effect during hover */
$("#para").slideDown(500);
}, function() {
/* Effect after un-hover */
$("#para").slideUp(500);
}
);
CSS
#para {
display: none;
}
Check the JSFiddle demo

I'm assuming you are not using jQuery, so you can use this piece of code to show the element when you hover the link.
document.getElementById("link").addEventListener("mouseover", function(){
document.getElementById("paragraph").style.display = "block";
});
You need to replace link and paragraph with the ID of your link and paragraph.
To also hide the paragraph again when your mouse leaves the link, add this code too:
document.getElementById("link").addEventListener("mouseout", function(){
document.getElementById("paragraph").style.display = "none";
});

I have made an example for you:
$(document).ready(function () {
var link = $('#myLink');
link.on('mouseover', function () {
$('.lorem').show();
})
})
.lorem {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
my link
<p class="lorem">
lorem ipsum
</p>

How can I pop up a div while hovering <a> tag?

I have troubling with showing a div while hovering a <a> tag , I could not solve the problem, my code is here in JSFIDDLE.
The <a> tag will be visible, while I click or hover on <a> tag the div below it should be visible.
Part of my code is like this :
<a class="search dropbox_btn" title="Ara" href="#drop-search" id="tour-search">Ara</a>
How can I do it with CSS, JavaScript or jQuery?
UPDATE: I want to show the div below:
<div id="pill_identifier_fmt">

Pure CSS solution:
JSFIDDLE
#pill_identifier_fmt{
display:none;
}
#tour-search:hover + div#pill_identifier_fmt{
display:block;
}
#pill_identifier_fmt:hover{
display:block;
}

Check this, DEMO Fiddle. If you wish you perform action on the form, this is the solution.
a#tour-search finds an <a> tag with id 'tour-search'. If you have multiple <a> tags use this. Else just $('a') would be fine.
$("a#tour-search").hover(function(){
$("#pill_identifier_fmt").css("display","block");
});
OR
$("a#tour-search").hover(function(){
$("#pill_identifier_fmt").show();
});
If you have multiple <a> tags
$("a").hover(function(){
$(this).closest('div').show();
});

Try this to hide and show div on hover of anchor tag.
$('.search').hover(
function() {
$('#pill_identifier_fmt').show(1000)},
function(){
$('#pill_identifier_fmt').hide(1000)}
);
Update:
If you just want to show the div after hovering not hide it,then you can do this
$('.search').hover(
function() {
$('#pill_identifier_fmt').show(1000)}
);

Using jQuery, you can add the code below. The advantage is that the form won't disappear the moment you hover away from the <a> tag.
JSFiddle
CSS:
.showAlways {
display: block;
}
.showHover {
display: none;
}
.showHover:hover {
display: block;
}
JavaScript:
$(document).ready(function() {
$('#pill_identifier_fmt').addClass('showHover');
$('#tour-search').hover(function() {
$('#pill_identifier_fmt').addClass('showAlways');
$('#pill_identifier_fmt').removeClass('showHover');
}, function() {
setTimeout(function() {
$('#pill_identifier_fmt').addClass('showHover');
$('#pill_identifier_fmt').removeClass('showAlways')
}, 1000);
});
});

change the color of text on mouseover in JS

I am very new to JS. My requirement is very simple, to change the color of Text on Mouse Over.
I have created 2 JS functions : 1st for MouseOver and 2nd for MouseOut.
Can I do it in one single JS function.
I have other Text also.
JavaScript
function highlightBG(element) {
document.getElementById('element').className='AttachOnMouseOverText';
}
function highlightOutBG(element){
document.getElementById('element').className='AttachOnMouseOutText';
}
HTML code :
<td align="center" id="element">
<img name="folder" onMouseOver="highlightBG();return true;" onMouseOut="highlightOutBG();return true;">
<br>Add Folder
</td>

You can find here the answer using pure-js as you asked :
HTML :
<div id="element" class="AttachOnMouseOutText" onMouseOver="highlightBG();return true;" onMouseOut="highlightOutBG();return true;">Hidden text</div>
CSS :
.AttachOnMouseOverText {
color: white;
}
.AttachOnMouseOutText {
color: black;
}
Javascript :
function highlightBG() {
document.getElementById('element').className='AttachOnMouseOverText';
}
function highlightOutBG(){
document.getElementById('element').className='AttachOnMouseOutText';
}
You can see here an example using CSS :hover state.
EDIT
If you want a single function to handle this, try someting like :
function highlightBG(elementName, isIn) {
if (isIn)
document.getElementById(elementName).className = 'AttachOnMouseOverText';
else
document.getElementById(elementName).className = 'AttachOnMouseOutText';
}

this is simple by using css:
selector:hover
{
color:red;
}
And you can also use jquery for this
$("selector").on( "mouseover", function() {
$( this ).css( "color", "red" );
});

If you need the hover change on a link then definitely use a :hover in CSS, it will be the most efficient way.
However if you are looking to add it to a non-link element it can cause issues in IE7 and 8. Have a look at Google Best Practices, in particular the section about :hover.
If that is the case then JS is a way to do it.

It might be easier to use jquery to do what you want, if you are using javascript you might just as well make use of jquery. Create a css class to represent the color you want to change the text to, for example
.green{
color: green;
}
Change your HTML to
<td align="center" id="element">
<img name="folder" />
<br>Add Folder
</td>
And add some jquery to add your css class when you move your mouse over 'element', for example
$("#element").mouseover(function(){
$(this).addClass("green");
});
If you want to change the color back when the mouse leaves the area, you can just remove the class again. For example
$( "#element" ).mouseleave(function() {
$(this).removeClass("green");
});

Here is the HTML (with an inline ID of "practice"):
<h1 id="practice">Hello!</h1>
Here is the vanilla JavaScript (using a generic function and a callback):
document.getElementById("practice").addEventListener("mouseover", function() {
document.getElementById("practice").style.color = "pink";
});
document.getElementById("practice").addEventListener("mouseout", function() {
document.getElementById("practice").style.color = "yellow";
});
Mousing over changes the HTML text to yellow; removing the mouse from the area returns the HTML text to black.

How to change a specific HTML string with jQuery

Here is my HTML code:
<th>
Click<br/>
<img class="magnifier" height="66" src="../Images/magnifier-zoom.png" width="75"><br/>
To Enlarge
</th>
I have a jQuery script that when clicked it toggles an enlarge class, so when someone clicks to enlarge I want to change the enlarge word to shrink would there be any simple way of doing this in jQuery?
Or do you guys think I am better off having 2 <div>'s or even <span> elements and toggle the display of each element?

There are numerous ways to do this. You could leverage pseudo-element content, do string manipulation with JavaScript, and more. In the end, the best approach is to probably just toggle the visibility of a couple nested elements:
I've placed a default "shrink" class on my td element. Within, I have a couple span elements customized with explicit data-do attributes indicating the purpose of each:
<td class="shrink">
Click to
<span data-do="enlarge">Enlarge</span>
<span data-do="shrink">Shrink</span>
<img src="..." />
</td>
We target the data-do attributes that are nested within elements that have corresponding classes, and we disable the display of these elements:
.shrink [data-do='shrink'],
.enlarge [data-do='enlarge'] {
display: none;
}
In order to toggle the class of the td element, we bind up some simple jQuery:
$("td").on("click", function () {
$(this).toggleClass("shrink enlarge");
});
Anytime a td is clicked (you can make the selector specific to a single td), we add toggle the "shrink" and "enlarge" classes. If "enlarge" was present to begin with, it is removed; otherwise it will be added. The same goes for "shrink".

Change your HTML to
<th>
<div>Click</div>
<img class="magnifier" height="66" src="../Images/magnifier-zoom.png" width="75">
<div>To Enlarge</div>
</th>
To have elements instead of text nodes.
Then you can do simple:
$('.magnifier').click(function() {
var $next = $(this).next();
$next.text($next.text() == 'To Enlarge' ? 'To Shrink' : 'To Enlarge');
})
Demo: http://jsfiddle.net/B7GDQ/

This is the direct answer to your questions, although not the best method:
$(".magnifier").on("click", function () {
if ($(this).hasClass('enlarge')) {
$(this).removeClass('enlarge');
this.parentNode.lastChild.textContent = 'To Enlarge'
}else{
$(this).addClass('enlarge');
this.parentNode.lastChild.textContent = 'To Shrink';
}
});
The ideal method would be to use pseudo elements:
Codepen
HTML:
<div class="magnifier">
Click<br/>
<img height="66" src="../Images/magnifier-zoom.png" width="75"><br/>
</div>
CSS:
.magnifier::after {
content: 'To Enlarge';
}
.magnifier.enlarge::after {
content: 'To Shrink';
}
JS:
$(".magnifier").on("click", function () {
$(this).toggleClass('enlarge');
});

Javascript creating <div> on the fly

I have a a link that looks similar to this
Blog
As you can the link has an ID of 'blog' what I want to do is to create an div on the fly with the ID from the link that was clicked so if the 'blog' is clicked, then the markup would be
<div id="blog">
<!--some content here-->
</div>
Like wise if for instance the news link is clicked then I would like,
<div id="news">
<!--some content here-->
</div>
to be created in the markup if this possible? and how Im pretty new to jQuery.

Try this:
$("a").click(function(){
$("#wrapper").append("<div id=" + this.id + "></div>");
});
Not tested, should work ;)
where: #wrapper is parent element, work on all a as you see.

You will need to give the div a different ID. Perhaps you could give it a class instead:
$("#blog").click(function() {
$(this).after("<div class='blog'>...</div>");
return false;
});
That's just one of many ways to create a div. You probably also want to avoid duplicates however in which case, use something like this:
$("#blog").click(function() {
var content = $("#blog_content");
if (content.length == 0) {
content = $("<div></div>").attr("id", "blog_content");
$(this).after(content);
}
content.html("...");
return false;
});
As for how to handle multiple such links I would do something like this:
Blog
News
Weather
<div id="content"></div>
with:
$("a.content").click(function() {
$("#content").load('/content/' + this.id, function() {
$(this).fadeIn();
});
return false;
});
The point is this one event handler handles all the links. It's done cleanly with classes for the selector and IDs to identify them and it avoids too much DOOM manipulation. If you want each of these things in a separate <div> I would statically create each of them rather than creating them dynamically. Hide them if you don't need to see them.

Try This :
<a id="blog">Blog</a>
<a id="news">news</a>
<a id="test1">test1</a>
<a id="test2">test2</a>
$('a').click(function()
{
$('<div/>',{
id : this.id,
text : "you have clicked on : " + this.id
}).appendTo("#" + this.id);
});

First of all you should not make 2 elements with same ID. At your example a and div will both have id="blog". Not XHTML compliant, plus might mess up you JS code if u refernce them.
Here comes non-jquery solution (add this within script tags):
function addDiv (linkElement) {
var div = document.createElement('div');
div.id = linkElement.id;
div.innerHTML = '<!--some content here-->';
document.body.appendChild(div); // adds element to body
}
Then add to HTML element an "event handler":
Blog

This question describes how to create a div. However, you shouldn't have two elements with same IDs. Is there any reason why you can't give it an id like content_blog, or content_news?

Unfortunately if you click on a link the page you go to has no idea what the idea of the link you clicked was. The only information it knows is what's contained in the URL. A better way to do this would be to use the querystring:
Blog
Then using the jQuery querystring plugin you could create the div like:
$("wrapper").add("div").attr("id", $.query.get("id"));

You shouldn't have elements in your page with the same ID. Use a prefix if you like, or perhaps a class.
However, the answer is as follows. I am imagining that your clickable links are within a div with the ID "menu", and your on-the-fly divs are to be created within a div with the ID "content".
$('div#menu a').click(function(){
$('div#content').append('<div id="content_'+this.id+'"><!-- some content here --></div>');
});
Any problems, ask in the comments!

Also the following statement is available to create a div dynamically.
$("<div>Hello</div>").appendTo('.appendTo');
Working fiddle: https://jsfiddle.net/andreitodorut/xbym0bsu/

you can try this code
$('body').on('click', '#btn', function() {
$($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})
#old > div{
width: 100px;
background: gray;
color: white;
height: 20px;
font: 12px;
padding-left: 4px;
line-height: 20px;
margin: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
<!-- Button trigger modal -->
<button type="button" id="btn">Create Div</button>
<div id="old">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>