I have an issue and I can't seem to get around it.
I have button that opens up a slider in the same page (move a section of the page right and reveal text underneath) but when you click on the button I want to point to the href to move the text-slider to the top of the page and also execute the slider function to activate.
Here is the code:
<div id="st-trigger-effects">
<button ng-click="edu_non_sports()" data-effect="st-effect-3" class="btn- transparent sidebar-btn">
<img src="images/non-sport-extra-murals.svg">
</button>
Its just a basic button that activated the slider, but it is set to a specific section on the page. So when when you click on the button, it opens the slider but you have to then scroll to see the section that was opened.
So I want to know, how can I get the button to:
Move to the section of the page I want to see on the screen, and then also
Execute the code that actually opens the slider to reveal the text
Related
I'm trying to create a slider with 6 images.
I've used 6 anchors. Whenever user clicks on any anchor slider image will be change accordingly and will show that particular anchor's image but the problem I'm facing is whenever user clicks on anchor, my slider move to the top of the screen because I've used ID of the images as anchor's href
Any kind of help will be appreciated!
Use event.preventDefault(); to stop the default action
In parent frame, there are three links (of different website - subdomains) and one button which opens a modal window. iframe has a default website, but the website changes whenever any link is clicked. I want to change the background color in iframe with the help of modal window, such that when any option in modal window is selected and submitted, it changes the background color of website in iframe.
I tried doing it with session variable but able to change background color only of default website.
Please suggest some ways to do it for all the website in single iframe.
Update:
In main.php file:
<iframe src="https://www.try1.com?bkg_color=<?php echo $_SESSION['bkg_color']; ?>" name="box" id="box">
</iframe>
Links for iframe:
Link1
Link2
Link3
Form:
There is a button in parent window, when clicked, pops up a modal window and user select option from the drop down list. After selecting, user clicks submit button.
Submit Button:
<?php
if (isset($_GET['submit'])) {
$_SESSION['bkg_color'] = $_GET['bkg_color'];
}
?>
The dialog after clicking the Send button of Facebook seems to be truncated. I use this code to add the button to content.php of a WordPress site. The parents div display completely but this child div doesn't.
<div class="fb-send"></div>
Picture of the dialog - Click here to see (I am a newbie here so I can't post picture)
So I have this site on which I have several divs. When you click on a div, a modal opens (OnClick). The modal's content is loaded remotely (modal body in another file). Within the remote link, I'm also delivering some data via GET. The data is different for each clickable div. Now if I click a div, the modal opens with the correct data. When I close that modal and try to open another one, the content displayed is still made with the data of the first clicked div.
What seems to be the issue here?
That's about what I'm trying to do (simplyfied):
<div id="1" OnClick="openModal('modal_content.php?name=Peter')"></div>
<div id="2" OnClick="openModal('modal_content.php?name=John')"></div>
"openModal" is a selfmade function which opens the modal with the remote content (url in brackets).
Now when I click on the first div, the modal should be
Hello Peter!
and the 2nd should be
Hello John!
First one clicked works fine. When I close that one and try to open the other, the content doesn't change.
I'm familiar with the Ajax/jQuery .load() or php include() which can be used to load other content into a div on a page.
Kindly take a look at this example I've posted: my site with page transitions
How I've set up this page is, the body is 100% of the screen with no overflow. There is the blue section which is 100% height and the red section which is 100% height positioned 100% from the top. When you click the button the blue div is scaled back and the red div is transitioned to top: 0;.
My problem when you hit the back button, it doesn't go back to the blue section, it goes back to the previous page (blue page).
My question is how can I set this up so the red div (2nd one) will actually change the url (and load another php page into it using include(); or some other method)? For example when you click the button on the blue page, the red page will show up (with the included content) and the url will change to: davidfateh.com/red. I realize hitting the back page won't give me the transition, but at least it will go back to the blue page, which is my goal.
Thanks for looking and for any advice! Cheers!
So basically you show the same page, just different part of it. That is why hitting the back goes to the previous page, not the previous section, which is actually on the same page.
You can do what you want like this:
Create 2 different php files. red.php and blue.php
In each file have only the part you want.
the buttons now have to send from one page to the other. How to do this, depends on how you implemented your existing button.
For example, if the buttons are implemented like forms, use something like this:
<form action="red.php"> in one and <form action="blue.php"> in the other.
By pressing the button it will jump from one page to the other.