| Page 1 of 1 |
Stige
Posts: 3544
Location: Finland
|
 Posted: Wed, 22nd Apr 2015 10:05 Post subject: Clicking "more info" opens a div with dynamic cont |
|
 |
What would be the best way to achieve this?
I basicly got a listing of stuff with basic info there and then "More info" link at the end.
Now rather than opening a completely new page, I was thinking of opening a div in the middle of the page instead with the additional info in it, which would have to be updated/loaded dynamicly depending on what I want more information on.
Then the user could close it and click "More info" on another bit instantly without having to go backwards on the browser to see the list again.
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 22nd Apr 2015 10:53 Post subject: |
|
|
Do you use jQuery?
| Code: |
<button class="moreinfo" data-url="dickbutt.html">Super deals on dickbutt!</button>
<button class="moreinfo" data-url="buttdick.html">The butt AND the dick!</button>
<button class="moreinfo" data-url="coolhaircuts.html">If you want to look as sexy as me</button>
<div id="moreinfotarget"></div>
|
in your css you should have a rule for
| Code: |
#moreinfotarget { display: none; }
|
so that it is initially hidden and you could also add some rules so that the message is in the middle of the screen, has a certain background color or border or whatever.
And in your script, which you should load at the end of the page the following should go:
| Code: |
$('.moreinfo').on('click', function(){
var $clickedbutton = $(this);
$('#moreinfotarget').load($clickedbutton.data('url'), function(){ $(this).show(500)});
});
|
|
|
| Back to top |
|
|
Stige
Posts: 3544
Location: Finland
|
| Posted: Wed, 22nd Apr 2015 11:45 Post subject: |
|
|
Yes I do and thanks.
You made it look much more simple than I thought it would be lol
I just had an idea though that maybe instead of using a link/button at the end of the line, I could allow the users to just click anywhere on the line to open the extra information.
Reason for this is the line width is a bit tight at the moment, removing that extra button/link at the end would probably fix any possible issues I might have in the future with long names breaking into two lines due to lack of space.
I'm not that familiar with this stuff yet but I THINK your script should work fine for this purpose aswell, no?
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 22nd Apr 2015 11:52 Post subject: |
|
|
yes of course, just put the class on the <div>, <span> or whatever your line is in and the content will go into the pre-specified target.
|
|
| Back to top |
|
|
Stige
Posts: 3544
Location: Finland
|
| Posted: Wed, 22nd Apr 2015 11:58 Post subject: |
|
|
|
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 22nd Apr 2015 12:05 Post subject: |
|
|
Here, I made you a little schmizzle:
http://jsfiddle.net/nebp3jgr/
Ugh and just as a warning, because of security reasons, you can only ajax load stuff from the same origin meaning, if your page is hosted on www.stige-rocks.com, you can't tell your ajax to load content from http://www.pumpaction-rocks-even-more.com. If you want to circumvent that, you'd have to write a mini proxy on server side (f.e. in php) that'll load the page/content from pumpaction-rocks-even-more.com
A call to such php would look like
| Code: | | <div class="moreinfo" data-url="steal.php?from=http://pumpaction-rocks-even-more.com/evencoolercontent.html">My cool content! Really, I did it!</div> |
Your php would have some code inside that downloads the content of the target url (fetched from get parameter via $_GET["from"]) and then respond with the contents of it 
|
|
| Back to top |
|
|
Stige
Posts: 3544
Location: Finland
|
| Posted: Wed, 22nd Apr 2015 13:15 Post subject: |
|
|
It seems that way doesn't work very well with PHP files.
| Code: | function getInfo(id) {
$("#moreinfo").slideDown(500);
$.ajax({
url: "inc/adinfo.php?id="+id
}).done(function(data) {
$('#moreinfo').html(data);
});
return false;
}
|
| Code: | | echo '<div onClick="getInfo('.$id.');" class="moreinfo info-row info-hover '.$rowcolor.'"> |
This is what I used as a final piece of code to get it to work well.
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 22nd Apr 2015 13:30 Post subject: |
|
|
Um yeah, but then there is something else wrong with your code, because javascript is javascript and runs on your client. If your PHP doesn't "like it", then there has to be something else terribly wrong (like forgetting to close hyphens), because your php just generates html with inline code.
|
|
| Back to top |
|
|
Stige
Posts: 3544
Location: Finland
|
| Posted: Wed, 22nd Apr 2015 13:36 Post subject: |
|
|
When I tried with your method, it would print html tags as they were, showing <br /> etc as plain text, any idea why?
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 22nd Apr 2015 13:46 Post subject: |
|
|
| Stige wrote: | | When I tried with your method, it would print html tags as they were, showing <br /> etc as plain text, any idea why? |
Load just loads content. If you load a full html page it will load all the stuff that is inside. If you want to make sure that everything is loaded properly you can also do this
| Code: | $.get('myfile.html', function(data){
$('#target').html(data);
}); |
|
|
| Back to top |
|
|
Stige
Posts: 3544
Location: Finland
|
|
| Back to top |
|
|
| Page 1 of 1 |
All times are GMT + 1 Hour |
