Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #327

    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?

    #30855

    There’s a plugin for that…I use it on a few sites…

    http://www.grimmdude.com/wordpress-simple-popup-plugin/

    #30856

    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

    #30857

    Smarty pants, but a better answer :)

    #30858

    i like smarties. Thanks a ton!!!!!

    #30859

    You’re welcome.

    The Dude

    #30860

    Me 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>

    #30861

    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;
    }

    #30862

    k,

    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:

    Open pop up window with links

    #30863

    Hey!

    1.) Yes

    2.) When adding links to external sites, you must include http:// and it should look like this:

    http://www.link.com/

    Best regards,

    James

    #30864

    the 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://?

    #30865

    < a href=”#links-1″ rel=”prettyPhoto” > Open pop up window with links

    #30866

    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.

    #30867

    No, 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>

    #30868

    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)?

    #30869

    can I call you. this is too difficult in a chat format. my email is (Email address hidden if logged out) if you’re able to send me your ph# that way

    #30870

    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 Links

    #30871

    I 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?

    Page relative to current URL

    Page relative to site root

    #30872

    when i post my reply the code appears as blue text… for these two:

    Page relative to current URL

    Page relative to site root

    what do i enter in their place?

    do i create a page and then copy the link into the code?

    what is site root?

    #30873

    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.

    #30874

    still 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>

    #30875

    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/

    #30876

    Sorry, 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>

    #30877

    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.

Viewing 24 posts - 1 through 24 (of 24 total)

The topic ‘how to: create small window (pop up?) for links’ is closed to new replies.