The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> initiating a pop up
gc-malcolm
post May 8 2018, 04:36 PM
Post #1





Group: Members
Posts: 8
Joined: 8-May 18
Member No.: 26,641



I am trying to make a popup run from a button inserted into a table

I have a div that defines a popup screen, which works nicely, I can place that div in my code and it draws a button which when clicked
opens a pop up

CODE

<!--https://www.w3schools.com/tags/tag_button.asp   ( this is where the original pop code came from ) -->
<div data-role="main" class="ui-content">
    <!-- button constructor was originally here but has been removed and is now in the table cell -->
    <!-- <td><a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left" >Edit cell</a>  </td>  -->
    <div data-role="popup" id="myPopup" class="ui-content" style="min-width:250px">
      <form method="post" action="/action_page_post.php">
        <div>
          <h3>Edit cell </h3>
           <label for="pswd" class="ui-hidden-accessible">URL (link): </label><img src="./pics/pcyc_delete.jpg"  >
          <input type="password" name="passw" id="pswd" placeholder="URL: http://www.pcyc.org.au/" >
          <input type="submit" data-inline="true" value="Cancel">
          <input type="submit" data-inline="true" value="Save">
         </div>
      </form>
    </div>
  </div>



I have found that I can initiate the div
by placing the <div> prior to the table and then using the following line extracted from the div inside the table cell
CODE

<td><a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left" >Edit cell</a> </td>


I would like to be able to initiate the div by using just
CODE

<a href="#myPopup"</a>

but I can't work out how to stick (or where to stick) the rest of the button definition
data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left
back into the div

I do hope thats clear, I appologise for any terminolgy I have missused or used incorrectly.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 8 2018, 05:04 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



If you had time to read what I previously wrote, please ignore it. I'm half asleep and more or less witless. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 8 2018, 05:13 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



New try. smile.gif

The sample you provide, this one...

CODE
<a href="#myPopup"</a>


... is severely broken. The start tag lacks the closing '>'. There is no link text so there's nothing to click. The link won't even be visible on the page.

Those classes and stuff you removed, are they used to style the link to look like a button? In that case, just keep them there. I don't understand what you mean when you say you want to stick them back into the div. They belong in the start tag for A.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gc-malcolm
post May 8 2018, 06:57 PM
Post #4





Group: Members
Posts: 8
Joined: 8-May 18
Member No.: 26,641



oops my cut and paste wasn't brilliant should have been

<td><a href="#myPopup"></a></td>

Your quite correct it does not show the button on the page, I kknew that, cause it don't work! hence the question.

<td><a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left" >Edit cell</a> </td> -->

does show the button on the page , but I would like to do somethting different


So if I wanted to put this button multiple times on a page I would have multiple instances of

<td><a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left" >Edit cell</a> </td> -->

that seems rather untidy OR worse copy the whole div with the button constructor line in it multiple times

I would rather have a shorter href and stick the styling in the div (if that is at all possible )

I am not sure why you cant have a div that describes a button with style that causes a pop up elements and then call that by reference, it could then paint a button or whatever where ever you wanted it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2018, 04:09 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



No, it's not possible. But what does it matter? How "long" the A tag is doesn't show on the page. As said, you can change the link text. You can even remove it altogether, but in this case your button need to have a width and size. Maybe it already has, otherwise you need to add that to the CSS.

I'm afraid I still don't understand what it is you want to do. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2018, 05:33 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I agree though there are a lot of classes. It's possible you can tidy it up by changing the CSS, but I can't say. If you don't want to do that, you're stuck with things as they are. There may also be a reason for why it's done this way.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 9 2018, 06:05 AM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(gc-malcolm @ May 8 2018, 11:36 PM) *

CODE
<!--https://www.w3schools.com/tags/tag_button.asp   ( this is where the original pop code came from ) -->


That page doesn't contain all the classes, are they from some template?

QUOTE
I would like to be able to initiate the div by using just
CODE

<a href="#myPopup"</a>

If the popup uses javascript you might as well create the whole button with javascript too (it could also be done with serverside scripting). Exactly how to do it depends on the existing HTML, if you're using a template it may not be worth the hassle untangling it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gc-malcolm
post May 26 2018, 09:07 PM
Post #8





Group: Members
Posts: 8
Joined: 8-May 18
Member No.: 26,641



After playing about it I found the solution I was looking for, php. php lets you create functions which contain html code to be displayed, so if I wanted to display my input box and buttons in the original sample, multiple times, I would stick em in a php function and call the function multiple times.

CODE

<html>
<head>
  <title>Just dicking about</title>

<?php  

some_div();
some_div();
some_div();
some_div();
some_div();


function some_div()
{
  //<!--https://www.w3schools.com/tags/tag_button.asp   ( this is where the //original pop code came from ) -->
echo'<div data-role="mainclass="ui-content">"';
echo'   <!-- button constructor was originally here but has been removed and is now in the table cell -->';
echo'    <!-- <td><a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left" >Edit cell</a>  </td>  -->';
echo'   <div data-role="popup" id="myPopup" class="ui-content" style="min-width:250px">';
echo'     <form method="post" action="/action_page_post.php"> ';
echo'        <div>';
echo'          <h3>Edit cell </h3>';
echo'          <label for="pswd" class="ui-hidden-accessible">URL (link): </label><img src="./pics/pcyc_delete.jpg"  >';
echo'         <input type="password" name="passw" id="pswd" placeholder="URL: http://www.pcyc.org.au/" >';
echo'         <input type="submit" data-inline="true" value="Cancel">';
echo'         <input type="submit" data-inline="true" value="Save">';
echo'        </div>';
echo'     </form>';
echo'    </div>';
echo'  </div>';
echo' </body>';
}
?>
</html>


Thankyou to those who replied. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 01:48 PM