How can I create a small window pop up over a page? I have some text on a page that I'm creating links to and I don't want the user to have to be diverted to another page or have to hit "back" to return to the page he clicked the link from... is there a short code or tab that I can't find that will give me what i want?
how to: create small window (pop up?) for links
24 posts from 4 voices- Started 2 years ago by Paul
- Latest reply from James Morrison
- This topic is not a support question
-
You can also use prettyPhoto as a pop up window. PrettyPhoto is used as lightbox plugin in Avisio (image viewer), so it's included in your theme package. Refer to this site if you want to learn more about it: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ > scroll down to " inline content".
Here a short tutorial:
To open inline content, simply:
1. Create a link (
<a href="”#”">).
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
3. Change the href of your link so it is the ID of the inline content you want to open with the ID CSS selector (#).Example code:
<a href="#links-1" rel="prettyPhoto" >Open pop up window</a> <div id="links-1" class="hide"> <p>This is inline content opened in prettyPhoto.</p> <p>Hello here are some links: link1 link2, etc. </p> </div>The Dude
Posted 2 years ago # -
Paul
MemberMe again. I tried a few different times to enter the code and text that I want but all I get is the visible code and text on the page. Where exactly am I supposed to be entering the code:
<div id="inline-1" class="hide">
<p>my text here.</p>
<p>MY text here</p></div>
</div>Posted 2 years ago # -
You need to create a link to the pop up window.
<a href="#links-1" rel="prettyPhoto" >Open pop up window with links</a>As you can see the link refers to a special div (#links-1)
After you created the link, you need to create the div:
You can write what you want into this div. These <p> are only tags for paragraphs. You can also use breaks
etc.Example code:
<div id="links-1" class="hide"> <p>Here are some links:</p> <p> <a href="http://gogle.com">Google</a> <a href="http://msn.com" >MSN</a> </p> </div>---> I forgot to mention last time that you need to define a class "hide" in your stylesheets.
open style.css
and add following code:
.hide { display:none; }Posted 2 years ago # -
Paul
Memberk,
1) i found the css stylesheet and just added the code you pasted at the bottom of all the other code in editor (appearance) was that right?
2) on creating a new link, it asks me for a web address and not to forget the http:// is this where i enter the code you pasted:
Posted 2 years ago # -
Hey!
1.) Yes
2.) When adding links to external sites, you must include http:// and it should look like this:
Best regards,
JamesPosted 2 years ago # -
Paul
Memberthe link is not for an external site. This is my problem. It is for a prettyphoto text pop up window to be inserted on a page. The code is:
Open pop up window with links
but this is not a http:// link, i am confused by this. How do i create a link to a prettyphoto text box when the code doesn't have a http://?Posted 2 years ago # -
The code
<a href="#links-1" rel="prettyPhoto">TEXT GOES HERE</a>will open the popup which uses this code:
<div id="links-1" class="hide"> <p>Here are some links:</p> <p> <a href="http://gogle.com">Google</a> <a href="http://msn.com" >MSN</a> </p> </div>The popup code box URL's should have a http:// if external; if on the same domain you can use a relative link such as:
The code
<a href="#links-1" rel="prettyPhoto">TEXT GOES HERE</a>will open the popup (hence the # which defines which links ID to open) which uses this code:
<div id="links-1" class="hide"> <p>Here are some links:</p> <p> <a href="page.php">Page relative to current URL</a> <a href="/my-folder/page.php">Page relative to site root</a> </p> </div>Hope that clears things up.
Posted 2 years ago # -
Paul
MemberNo, it doesn't help. I'm sorry, I probably haven't been asking the write questions...
What I need to know is where to enter the code for the link - on the link page, the add new link option has only one box to enter a link address and it demands a web address http://.
1) where do i enter this code for the link? < a href="#links-1" rel="prettyPhoto">TEXT GOES HERE
2) where do i enter this code for the pop up window?
<div id="links-1" class="hide">
<p>Here are some links:</p>
<p>
Google
MSN
</p>
</div>Posted 2 years ago # -
Add both the code blocks together like this:
<a href="#links-1" rel="prettyPhoto">TEXT GOES HERE</a> <div id="links-1" class="hide"> <p>Here are some links:</p> <p> <a href="page.php">Page relative to current URL</a> <a href="/my-folder/page.php">Page relative to site root</a> </p> </div>wherever you'd like the text to appear (in header.php for example).
Where exactly do you want the text to appear (and please provide a page link)?
Posted 2 years ago # -
Paul
Membercan I call you. this is too difficult in a chat format. my email is coldrick@hotmail.com if you're able to send me your ph# that way
Posted 2 years ago # -
I don't offer phone support, it would open up a can of worms I'd never close.
You can contact me by email at support {at} jamesmorrisondesign {dot} com using this subject (important or I won't see it):
Kriesi | Avisio | Paul | Create Small Window Popup For LinksPosted 2 years ago # -
Paul
MemberI get that this is the code to enter on the page that the intended user will read:
TEXT GOES HERE
<div id="links-1" class="hide">
<p>Here are some links:</p>
<p>
Page relative to current URL
Page relative to site root
</p>
</div>TEXT GOES HERE = what exactly? The term I wish the user to click on for the pop up?
What do i enter in these lines? What do i delete/type over?
Posted 2 years ago # -
Where text is in CAPITALS, it's something you can edit, so YOUR-TEXT-HERE would be the link text such as "Member" under your username in the left column. You can change this to anything you like.
A page relative to the URL is works out where you are in the site and gives you a link based on that. Look at the links you posted above in blue, the relative to current URL link looks for page.php in this folder on the website.
The site root is the lowest folder on the webserver for example http://kriesi.at/ is the root of this site. The Page relative to site root link is looking for page.php at the root.
Posted 2 years ago # -
Paul
Memberstill not getting it.
this is what I have
Cross-Linguistic Influence
<div id="links-1">
<p>Here are some links:</p>
<p>
http://www.placedanglais.ca/?page_id=329
Page relative to site root (WHAT DO I ENTER ON THIS LINE?????????)
</p>
</div>Posted 2 years ago # -
I'll give you an example:
The text which appears on the page should be: LINK-TEXT
The link I want to point it to is: http://www.mysite.com/<a href="http://www.mysite.com/">LINK-TEXT</a>Have a read through this to help you understand HTML: http://www.w3.org/MarkUp/Guide/
Posted 2 years ago # -
Paul
MemberSorry, your example doesn't help at all. This is becoming very time consuming and frustrating. I bought this theme, Avisio, because it offered many short codes and promised easy usage. All I want to do is enter a simple text box window from a text link on a page.
You keep answering my questions with extra info and examples that don't seem to equate. I read the link you gave. it says nothing of site root, it offers no reference to prettyphoto... you didn't tell me if my link was entered correctly:
< a href="page.php">http://www.placedanglais.ca/?page_id=329
< a href="/my-folder/page.php">Page relative to site root WHERE DO I FIND MY SITE ROOT ADDRESS?by your example, are you suggesting that I delete the pretty photo reference and just enter:
< a href="http://www.mysite.com/">Cross-Linguistic Influence
instead of: < a href="#links-1" rel="prettyPhoto">TEXT GOES HERE</a
the example you just gave in your last post doesn't use prettyphoto
< a href="#links-1" rel="prettyPhoto">TEXT GOES HERE
< div id="links-1" class="hide" >
<p>Here are some links:</p>
<p>
< a href="page.php">Page relative to current URL
< a href="/my-folder/page.php">Page relative to site root
</p>
</div>Posted 2 years ago # -
You need all of this code block:
<a href="#links-1" rel="prettyPhoto">TEXT GOES HERE</a> <div id="links-1" class="hide"> <p>Here are some links:</p> <p> <a href="page.php">Page relative to current URL</a> <a href="/my-folder/page.php">Page relative to site root</a> </p> </div>The text rel="prettyPhoto" opens the link links-1 which by default is hidden (class="hide" keeps it hidden). The opened links-1 box contains the links you want to add.
I have provided examples of a link to go within the popup box to replace this example code:
<a href="page.php">Page relative to current URL</a>in a previous post. If you have trouble understanding this, please see the HTML reference link I posted and read through it to get a grip on the basics of HTML.
Posted 2 years ago #
Reply
You must log in to post.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
