Here i am trying to open and get the contents of one div to target div on-click on a href.
Here i have table where i have hrefs which has the link to div ids, and i have an target div which is empty.
when i click the href links, the linked div contents should open in the target div.
for ex:
for link fea1 i have linked id #m1, when i click the fea1, the #m1 contents should appear in target div.
How can i do this???
here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<table border="0">
<tr>
<td>
<hr>
<a href="#m1">
fea1
</a>
<br>
<hr>
<a href="#m2">
fea2
</a>
<br>
<hr>
<a href="#m3">
fea3
</a>
<br>
<hr>
<a href="#m4">
fea4
</a>
<br>
<hr>
<a href="#m5">
fea5
</a>
<br>
<hr>
<a href="#m6">
fea6
</a>
<br>
<hr>
<a href="#m7">
fea7
</a>
<br>
<hr>
<a href="#m8">
fea8
</a>
<br>
<hr>
<a href="#m9">
fea9
</a>
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">
dasdasdasd
</div>
<div id="m2">
dadasdasdasd
</div>
<div id="m3">
sdasdasds
</div>
<div id="m4">
dasdasdsad
</div>
<div id="m5">
dasdasd
</div>
<div id="m6">
asdasdad
</div>
<div id="m7">
asdasda
</div>
<div id="m8">
dasdasd
</div>
<div id="m9">
dasdasdsgaswa
</div>
</body>
</html>
css:
a{
text-decoration:none;
color:black;
}
.target{
width:50%;
height:200px;
border:solid black 1px;
}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
display:none;
}
You can put all your #m1...#m9 divs into .target and display them based on fragment identifier (hash) using :target pseudo-class. It doesn't move the contents between divs, but I think the effect is close to what you wanted to achieve.
Fiddle
HTML
<div class="target">
<div id="m1">
dasdasdasd m1
</div>
<!-- etc... -->
<div id="m9">
dasdasdsgaswa m9
</div>
</div>
CSS
.target {
width:50%;
height:200px;
border:solid black 1px;
}
.target > div {
display:none;
}
.target > div:target{
display:block;
}
From what I know this will not be possible only with css. Heres a solution how you could make it work with jQuery which is a javascript Library. More about jquery here: http://jquery.com/
Here is a working example : http://jsfiddle.net/uyDbL/
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
});
});
Update 2018 (as this still gets upvoted) here is a plain javascript solution without jQuery
var target = document.querySelector('.target');
[...document.querySelectorAll('table a')].forEach(function(element){
element.addEventListener('click', function(){
target.innerHTML = document.querySelector(element.getAttribute('href')).innerHTML;
});
});
a{
text-decoration:none;
color:black;
}
.target{
width:50%;
height:200px;
border:solid black 1px;
}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
display:none;
}
<table border="0">
<tr>
<td>
<hr>
fea1<br><hr>
fea2<br><hr>
fea3<br><hr>
fea4<br><hr>
fea5<br><hr>
fea6<br><hr>
fea7<br><hr>
fea8<br><hr>
fea9
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>
Put for div same name as in href target.
ex: <div name="link"> and <a href="#link">
easy way to do that is like
Demo
havent tried but this might help
$(document).ready(function(){
r=0;s=-1;
$(a).click(function(){
v=$(this).html();
$(a).each(function(){
if($(this).html()==v)
return;
else ++r;
$(div).each(function(){
if(s==r)
$(div).appendTo($(".target"));
++S;
});
});
});
});
Try this code in jquery
$(document).ready(function(){
$("a").click(function(){
var id=$(this).attr('href');
var value=$(id).text();
$(".target").text(value);
});
});
if you use
angularjs
you have just to write the right css in order to frame you div
html code
<div
style="height:51px;width:111px;margin-left:203px;"
ng-click="nextDetail()">
</div>
JS Code(in your controller):
$scope.nextDetail = function()
{
....
}
Related
Here is the code that I am trying to improve
http://jsbin.com/cexixamuma/edit?html,output
The links are foldable, they fold when the user clicks on them.
Mu understanding is that the a:visited css is not honored by the newer browsers for privacy reasons.
I would like to give to my readers the option to check mark a like (✔) when they are done with the topic but my problem is that the when the user clicks on the link (line) the event is already used to fold, unfold the line What other options do I have?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
window.toggleDiv = function(divId) {
var ele = document.getElementById(divId);
var state=jQuery(ele).is(':visible');
jQuery(ele).toggle();
state=jQuery(ele).is(':visible');
localStorage.setItem( divId, state);
}
</script>
<script type="text/javascript">
(function($){
$( document ).ready(function() {
$(".collapsible").each(function(index) {
if (typeof($(this).attr('id'))!="undefined") {
id=$(this).attr('id');
var state = localStorage.getItem(id);
ele = document.getElementById(id);
if (state=="true") {
ele.style.display = 'block' ;}
else {
ele.style.display = 'none'; }
}
});
});
})(jQuery)
</script>
<link rel="stylesheet" type="text/css" href="https://aa4d96bd21c195e7b862b851b0818e89fb8ee102.googledrive.com/host/0B77cxO0Vjbb2MlYyUFpmVXhTUWc/knowledgetree.css" />
<a class="ConceptLevel1" href="javascript:toggleDiv('PktS/h+L5EeSqM/4hMH9JA==');" style="font-
size:13pt">Root</a><br>
<div class="collapsible" style="display:none " id="PktS/h+L5EeSqM/4hMH9JA==">
<a class="ConceptLevel2" href="javascript:toggleDiv('KlHtq+Xe60essn+0zs9E6g==');" style="font-
size:12pt">level 1</a><br>
<div class="collapsible" style="" id="KlHtq+Xe60essn+0zs9E6g==">
<div>Level 2</div>
<a class="ConceptLevel3" href="javascript:toggleDiv('EdMUp+28okWIWHVbvUaU1g==');" style="font-
size:11pt">Level 2</a><br>
<div class="collapsible" style="" id="EdMUp+28okWIWHVbvUaU1g==">
<a class="ConceptLevel4" href="javascript:toggleDiv('wIZCSCx/Xk2YShMAkF33Pg==');"
style="font-size:10pt">Level 3</a><br>
<div class="collapsible" style="" id="wIZCSCx/Xk2YShMAkF33Pg==">
<div>Level 4</div>
<a class="ConceptLevel5" href="javascript:toggleDiv('7GKbN5XRqkybT
+XsbHkyqw==');" style="font-size:9pt">Level 4</a><br>
<div class="collapsible" style="" id="7GKbN5XRqkybT+XsbHkyqw==">
<div>Level 5</div>
<a class="ConceptLevel6" href="javascript:toggleDiv
('rV75pTUXp0KP6Mx6EJznDg==');" style="font-size:8pt">Level 5</a><br>
<div class="collapsible" style="display:none "
id="rV75pTUXp0KP6Mx6EJznDg==">
<div class="details">Conclusion: for all the below levels ....</div>
<a class="ConceptLevel7" href="javascript:toggleDiv
('a5qCUDoqI0CPlS4pPGcODQ==');" style="font-size:7pt">Level 6</a><br>
<div class="collapsible" style=""
id="a5qCUDoqI0CPlS4pPGcODQ==">
<div>Level 7</div>
<div>Level 7</div>
</div>
<div>Level 6</div>
</div>
</div>
</div>
<div>Level 3</div>
</div>
</div>
</div>
Update: I ended up using dblclick for marking the paragraph as done
So basically you need to add a class for the visited links? With jQuery that would be: .addClass().
I have an issue right now and i am curious if there is a possible way to solve this. I have 2 div's enclosed in href elements. The problem is that i want to exclude the <p> element. Is there a way to do this despite it being inside the href element? Thanks.
<a href= "sample.com">
<div class="1">
<p>Hello</p>
</div>
</a>
<a href= "test.com">
<div class="2">
<p>Hello</p>
</div>
</a>
Yes you can but I wouldn't advocate for it.
You could use CSS to remove the appearance of a link:
a{
text-decoration: none;
}
p{
cursor: default;
color: #000;
}
Then you could use preventDefault() to prevent the p from triggering the action on click:
$("p").click(function(e){
e.preventDefault();
});
FIDDLE
What you really should do is add another wrapper to contain your elements and then wrap your div with an a like so:
<div class="wrapper">
<a href="http://www.google.com" target="_blank">
<div class="1"></div>
</a>
<p>Hello</p>
</div>
$(function(){
$('p').click(function(){
alert($(this).attr('href'));
// or alert($(this).hash();
});
});
I want to display a div on hovering the anchor tag using css. Below is my html code
<td class="cellStyle">
<a href="#" class="linkStyle">
<div>Home</div>
<div style="display:none;">I'm here... (some html) </div>
</a></td>
Please tell me how i can achieve this using css.
Thanks
Give your hidden div a class:
<td class="cellStyle">
<a href="#" class="linkStyle">
<div>Home</div>
<div class="demo">I'm here... (some html) </div>
</a></td>
And use these styles:
<style>
a.linkStyle div.demo { display:none; }
a.linkStyle:hover div.demo { display:block; }
</style>
Working jsfiddle: http://jsfiddle.net/6pB8G/
how to make sub menu appear when hover over link?
CSS
a.linkStyle:hover div.here {
display:block;
}
div.here {
display : none;
}
HTML
<a href="#" class="linkStyle">
<div>Home</div>
<div class="here">I'm here... (some html) </div>
</a>
(Added a class to div which is to be hidden first)
JSFIDDLE DEMO
Try this:
CSS:
.hiddendiv {display:none;}
.linkStyle:hover > .hiddendiv { display:block; }
HTML:
<a href="#" class="linkStyle">
<div>Home</div>
<div class="hiddendiv">I'm here... (some html) </div>
</a>
here is a working demo
It's better to keep block level elements outside from inline elements. So, try keeping DIV outside from A.
here is demo:
HTML
<td>
<a class="tooltip">Home</a>
<div class="tip">I'm here... (some html)</div>
</td>
CSS:
.tip{display:none}
.tooltip:hover + .tip{display:block}
Working Demo
How do I do this?
A menu with 3 links (A B C).
"A.html" is shown at start.
When link "B" is clicked, "A" is faded out and "B" fades in.
Every time a link is clicked. Content is changed by fadeout and fadein.
If possible I would like the browsers back buttom to work.
<div menu>
<link> A </link>
<link> B </link>
<link> C </link>
</div menu>
<div content>
A
</div content>
Try this: http://jsfiddle.net/fAvcq/9/
HTML
<div id="menu">
A
B
C
</div>
<div id="content">A</div>
CSS
.active {
color: red;
}
JS
$(document).ready(function(){
$('#menu a[class=active]').fadeOut('slow');
$('#menu a').click(function(){
$('#menu a[class=active]').fadeIn('slow');
$('#menu a[class=active]').removeClass();
$(this).addClass('active');
$('#menu a[class=active]').fadeOut('slow');
$('#content').html($(this).html());
});
});
you will need javascript or jquery for that
see your impossible possible below:
place your markup like this
<div class="menu">
<ul>
<li class="active">
<a href="#" > A </a>
<div class="A hidden">
<h1> Hello I am A </h1>
<img src="y.jpg">
</div>
</li>
<li>
<a href="#" > B </a>
<div class="B hidden">
<h1> Hello I am B </h1>
<img src="y.jpg">
</div>
</li>
</ul>
</div>
<div class="content">
</div>
and place a simple jQuery code like this:
//find the changeContent function to the click of anchors
$('a').on('click',function(){
changeContent(this);
});
//load the first content by default
changeContent($('li.active').find('a:first'));
function changeContent(target){
$('li').removeClass('active');
$(target).parent().addClass('active');
$('.content').html($(target).siblings('div').html());
}
TADA!! its done.
see this in live
I have a block of divs and I need to align them centered.
I have sucessfully put them side by side, but it´s dinamic and the last one needs to be centered.
Here is my CSS:
.mosaicoBox {
width:170px;
height:165px;
border:1px solid #ccc;
text-align:center;
float:left;
padding:0 10px;
margin-bottom:10px;
display:inline;
margin-right:8px;
}
Here is my HTML:
<center><br /><h3>Sistema TMJ</h3><br />
<div class="mosaicoBox mosaicoBoxOff " align="center">
<img src="../res/mosaico/111/th120x120_111.jpg" class="blank">
<div class="textMosaico">
<span class="orange">Apresentação do Sistema TMJ</span><br />
<span style="font-size:10px;">
<a href="http://www.youtube.com/embed/nwpPDX4RVSk?rel=0&wmode=transparent&autoplay=1"
onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 480, height: 385,
allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer',
preserveContent: false, objectLoadTime: 'after'})"
class="highslide">assistir</a>
| <a target="_blank" href="../res/mosaico/111/mosaico111.wmv" title="Formato WMV ()">download</a>
</span>
</div>
</div>
<div class="mosaicoBox mosaicoBoxOff " align="center">
<img src="../res/mosaico/112/th120x120_112.jpg" class="blank">
<div class="textMosaico">
<span class="orange">Moldagem do aparelho TMD</span><br />
<span style="font-size:10px;">
<a href="http://www.youtube.com/embed/J6corp_ZNoE?rel=0&wmode=transparent&autoplay=1"
onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 480, height: 385,
allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer',
preserveContent: false, objectLoadTime: 'after'})"
class="highslide">assistir</a>
| <a target="_blank" href="../res/mosaico/112/mosaico112.wmv" title="Formato WMV ()">download</a>
</span>
</div>
</div>
<div class="mosaicoBox mosaicoBoxOff " align="center">
<img src="../res/mosaico/113/th120x120_113.jpg" class="blank">
<div class="textMosaico">
<span class="orange">Opinião do Dentista</span><br />
<span style="font-size:10px;">
<a href="http://www.youtube.com/embed/bBBbCAjR7iY?rel=0&wmode=transparent&autoplay=1"
onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 480, height: 385,
allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer',
preserveContent: false, objectLoadTime: 'after'})"
class="highslide">assistir</a>
| <a target="_blank" href="../res/mosaico/113/mosaico113.wmv" title="Formato WMV ()">download</a>
</span>
</div>
</div>
</center>
<div class="separador">
</div>
So the last row is always on the left because of float:left in the css. I have tried to pu all this in another div with text-align:center and the inside divs with display:inline intead of float:left, but it scrambled it. What´s the solution for that? T
hanks for help.
Sorry for my bad english.
you can use inilne-block for this &n text-align:center to it's parent like this:
.parent{text-align:center}
.child{
width:30px;
height:30px;
display:inline-block
}
check this http://jsfiddle.net/sandeep/jXXJQ/2/
Create a wrapper for these three boxes, div which will hold them together.
body {margin:0; padding:0}
.mosaicoWrapper {
margin:0 auto;
width:600px;
}
and in html your code:
<div class="mosaicoWrapper">
<!-- Your code -->
<div class="separador"></div>
That should do the trick :-)
Code: http://jsfiddle.net/jXXJQ/1/