[jquery]html uit een andere pagina weergeven.
en ik heb meerdere linkjes waar die overheen moet hoveren en verschillende content weergeven. alleen lukt dit niet. ik heb gekeken naar een andere tooltip en deze
http://jsfiddle.net/craga89/v2WPz/
http://craigsworks.com/projects/qtip2/demos/#imagemap
is eigenlijk precies wat ik zoek, maar hoe krijg ik hieruit nou de inhoud uit een andere html file?
ik heb ( als je op jsfiddle kijkt ) de area veranderd in alles wat ik kon verzinnen maar kreeg niet uit een ander html file. kan iemand me even in de goede richting duwen?
Gewijzigd op 06/06/2012 10:28:07 door Reshad F
dan moet je info over de boerderij tezien krijgen. ik dacht dus alle boerderij info in een verschillende html bestandje dus bijv
boerderij1.html
boerderij2.html etc..
Gewijzigd op 06/06/2012 10:28:24 door Reshad F
Ofwel je laad een extern bestand (HTML/php) via de JQuery load() functie.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<style>
/* trigger button */
#tooltipfarm {
display:block;
height:44px;
margin: 0 auto;
margin-bottom:30px;
overflow:hidden;
width:159px;
cursor:pointer;
}
/* mouseover state */
#tooltipfarm:hover {
background-position:0 -44px;
}
/* clicked state */
#tooltipfarm:focus {
background-position:0 -88px;
}
/* tooltip styling */
.tooltip {
display:none;
background-color: #fff;
border: 2px solid #ad4;
height:300px;
padding:0px 30px 10px 30px;
width:500px;
}
/* a .label element inside tooltip */
.tooltip .label {
color: #4C7622;
width:35px;
}
.tooltip a {
color:#fff;
background-image: url('images/navigate_button.png') ;
font-size:13px;
font-weight:bold;
text-decoration: none;
width: 192px;
height: 25px;
float: left;
text-align: center;
line-height: 2;
}
.tooltip h1, h2 {
color: #CC401A;
}
.tooltip img {
border: 1px solid #4C7622;
}
.lijst {
color: #4C7622;
float: left;
}
.lijst ul {
width: auto;
}
</style>
/* trigger button */
#tooltipfarm {
display:block;
height:44px;
margin: 0 auto;
margin-bottom:30px;
overflow:hidden;
width:159px;
cursor:pointer;
}
/* mouseover state */
#tooltipfarm:hover {
background-position:0 -44px;
}
/* clicked state */
#tooltipfarm:focus {
background-position:0 -88px;
}
/* tooltip styling */
.tooltip {
display:none;
background-color: #fff;
border: 2px solid #ad4;
height:300px;
padding:0px 30px 10px 30px;
width:500px;
}
/* a .label element inside tooltip */
.tooltip .label {
color: #4C7622;
width:35px;
}
.tooltip a {
color:#fff;
background-image: url('images/navigate_button.png') ;
font-size:13px;
font-weight:bold;
text-decoration: none;
width: 192px;
height: 25px;
float: left;
text-align: center;
line-height: 2;
}
.tooltip h1, h2 {
color: #CC401A;
}
.tooltip img {
border: 1px solid #4C7622;
}
.lijst {
color: #4C7622;
float: left;
}
.lijst ul {
width: auto;
}
</style>
en de bijhorende jquery.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script>
$(document).ready(function() {
$("#tooltipfarm").tooltip({
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
</script>
$(document).ready(function() {
$("#tooltipfarm").tooltip({
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
</script>
maar ik weet zie niet hoe ik een andere toevoegen moet..
hier een linkje van de tooltip maker.. http://jquerytools.org/demos/tooltip/any-html.html
Gewijzigd op 06/06/2012 10:28:44 door Reshad F
Code (php)
1
2
3
4
5
2
3
4
5
$(".now1").tooltip({
tip: '#nowdiv1',
opacity: 0.9,
offset: [8, -55]
}
tip: '#nowdiv1',
opacity: 0.9,
offset: [8, -55]
}
Kan je dus ook de tip id afhankelijk maken van het id van het element waar je over hovert. Stel je geeft alle elementen een zelfde class, maar een apart id. En je laat de id's van de tooltip divs daar op lijken, dan heb je maar 1 functie nodig.
Code (php)
1
2
3
2
3
$('.tooltip_element').tooltip({
tip: '#div'.$(this).attr('id')
});
tip: '#div'.$(this).attr('id')
});
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$(document).ready(function() {
$("#tooltipfarm").tooltip({
tip: '#div'.$(this).attr('id'),
opacity: 0.9,
offset: [8, -55]
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
$("#tooltipfarm").tooltip({
tip: '#div'.$(this).attr('id'),
opacity: 0.9,
offset: [8, -55]
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
en de rest van die scripts vallen dan weg?
en mijn div ziet er dan zoiets uit?
<a href="#" class="tooltip">hier</a>
en de hidden heeft dan een id en ziet er als volgt uit>
<div id="naam1">hier een boerderij</div>
zoiets bedoel je?
Code (php)
1
2
3
2
3
<a href="#" class="tooltip" id="tool1">Eerste link</a>
<a href="#" class="tooltip" id="tool2">Tweede link</a>
<a href="#" class="tooltip" id="tool3">Derde link</a>
<a href="#" class="tooltip" id="tool2">Tweede link</a>
<a href="#" class="tooltip" id="tool3">Derde link</a>
Divjes die je wilt laten zien:
Code (php)
1
2
3
2
3
<div id="divtool1">hoverende tekst 1</div>
<div id="divtool2">hoverende tekst 2</div>
<div id="divtool3">hoverende tekst 3</div>
<div id="divtool2">hoverende tekst 2</div>
<div id="divtool3">hoverende tekst 3</div>
JQuery code om het te laten zien:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$(document).ready(function() {
$(".tooltip").tooltip({
tip: '#div'.$(this).attr('id'),
opacity: 0.9,
offset: [8, -55]
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
$(".tooltip").tooltip({
tip: '#div'.$(this).attr('id'),
opacity: 0.9,
offset: [8, -55]
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
Toevoeging op 21/05/2012 16:29:15:
edit: is er niet een of ander css hack die achter bijv #tooltip alle getallen meepakt?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<a class="tooltip" href="#"><div class="hide"></a>
a.tooltip div
{
display: none;
position: ....;
z-index: 10;
// etcetra
}
a.tooltip:hover div
{
display: block;
}
a.tooltip div
{
display: none;
position: ....;
z-index: 10;
// etcetra
}
a.tooltip:hover div
{
display: block;
}
Mocht display niet precies doen wat je wilt: gebruik visibility:; bijvoorbeeld.