I have an <a> and div control for pop up window function. The popup is working correctly. I want to set an image click to open the alert pop up, i.e. on image click I want to redirect to href action. My code is the following:
<div id="openModal" class="modalDialog">
<div> X
<h2>Timesheet Comments</h2>
<input type="text" class="TxtNotess" onchange="GetChange" />
<input type="button" class="BtnComment" value="Save" />
</div>
</div>
I have some CSS code to handle the popup, and now I want to use an image and try to call the href action on click event of image
<img src="~/Images/comment.png" class="testmy" />
<a href="#openModal">
</a>
$('.testmy').click(function() {
alert('hi');
$('#openModal').click();
});
Put the and around the image
<a href="#openModal">
<img src="~/Images/comment.png" class="testmy" />
</a>
And remove the javascript code afterwards, that is not needed
Related
Consider this code:
<section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false">
<div class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
<div class="back-button" ng-click="activeSection=false">CLOSE</div>
</a>
</div>
</div>
</section>
I have an ng-click in the that element which changes the value of 'activeSection' to true. Inside of it, I have another button that can switch this back to it's initial value (false).
In the actual app, it would show or hide this child button based on a class added to the element,just to give you a little background what I'm trying to achieve.
When I click on the element, it does as I expect it to be: switch the value to 'true'. But when I click on the .back-button element with the other ng-click, it fails to register the changed value.
Why is that?
They're both inside the same controller, btw. If there's a solution that doesn't involve creating a new controller, it would be better.
If you click on your back button, activeSection will be false but then your event will be propagated to its parent so the ng-click of Section will be executed too and activeSection will be true again.
In order to make your code work, you should stop the propagation of the ng-click event after changing the value of your variable in your back-button.
Your code would look like this:
<section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false">
<div class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
<div class="back-button" ng-click="activeSection=false; $event.stopPropagation();">CLOSE</div>
</a>
</div>
</div>
</section>
What you are doing wrong is that you are putting the close button inside the element which have already ng-click, that's why when you are clicking the close button, it executes the parent ng-click and stop propagation for all other click events happening simultaneously.
So, the possible solution is making another super parent of the elements and taking the close button out of the element which is making it visible when clicked and adding a ng-show directive to the close button.
Checkout the following snippet
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<section class="page-section about-us" scroll-bookmark="about-us" ng-init="activeSection=false">
<div ng-click="activeSection=true" class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
</a>
</div>
</div>
<div ng-show="activeSection" class="back-button" ng-click="activeSection=false">CLOSE</div>
</section>
</div>
I've used an iframe code similar to:
<iframe src="/comment_contents.php?profile_id=2850" height="100%" width="100%" style="border: none;">
</iframe>
inside a Bootstrap Modal in an another page (/profile_comments.php?profile_id=2850).
HTML contents inside the iframe page (/comment_contents.php?profile_id=2850) are something like this:
<form method="post" action="/comment_contents.php?profile_id=2850" class="form-comment">
<div class="form-comment-contents">
<input type="text" name="comment" value="" class="comment-text">
<input type="submit" value="Comment" class="comment-submit">
<br><br>
<a href="/view_profile.php?id=2851">
<img src="img/profile2851.jpg" class="circle-comments" alt="Emma Watson">
</a>
<div class="comment-text lead">You are just awesome!</div>
<br>
<a href="/view_profile.php?id=2852">
<img src="img/profile2852.jpg" class="circle-comments" alt="Bill Gates">
</a>
<div class="comment-text lead">You are Cool!</div>
</div>
</form>.
You may have noticed there is a code:
...
So, when a person clicks on it, a Profile View page opens inside the iframe. But I want link to be opened not in the iframe, but in the outside. I mean, in the URL bar.
Is there any javaScript or something else to open the link URL (inside the iframe) in the URL Bar?
Just add target="_top" to that link
<img src="img/profile2851.jpg" class="circle-comments" alt="Emma Watson">
Are you preferring to open the link in a new tab and not in the same tab?
You could try this..
a href="/view_profile.php?id=2852" target="_blank">...
I used target="_blank" that allows you to open the link in a new tab. This Link might be of help, https://www.w3schools.com/tags/att_a_target.asp .
HTML Part
<a class="btn ban-default loginsignupbutton" href="#" data-featherlight="#fl1">Login/Signup</a>
<div class="lightbox" id="fl1">
<h2>Login</h2>
<input name="loginuserphone" placeholder="MOBILE NUMBER" type="text">
<input name="loginuserpassword" placeholder="PASSWORD" type="password">
</div>
What I want to do:
actually the basic script is working fine, when user clicks on the button, the lightbox popup is coming... but I want to AUTO open the popup, on page loads.
I Tried
$('.loginsignupbutton').trigger('click');
did't worked, then i tried.
$('a.loginsignupbutton').featherlight({
openTrigger: 'click',
});
did't worked.
Any help is appreciated.
I've got a spoiler-code on my Homepage.
The Code looks like this:
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<a display="initial"
id="button"
title="Click to show/hide content"
type="button"
onclick="if(document.getElementById('spoiler')
.style.display=='none') {
document.getElementById('spoiler')
.style.display=''
}else{
document.getElementById('spoiler')
.style.display='none'
}">
Show hidden content
</a>
What I want to do now is quite simple:
After clicking on the element "button", the hidden content shall be shown and the anchor <a> shall become invisible.
So what I am looking for is:
onclick: if element "spoiler" is on display=none AND element "button" is on display=initial THEN the element "spoiler" shall change to display=initial AND element "button" shall change to display=none
Is this possible?
This code in jquery will solve your problem. I hope this is what you wanted.
$('#button').click(function() {
$('#spoiler').css('display', 'block');
$(this).hide();
});
I have demo here as well.
A JavaScript only solution will be as follows:
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<a display="initial" id="button" title="Click to show/hide content" type="button" onclick="document.getElementById('spoiler').style.display='block';
document.getElementById('button').style.display='none'">Show hidden content</a>
Try following code. JSFiddle.
<div id="spoiler" style="display:none" onclick="this.style.display='none';">
HIDDEN CONTENT HERE
</div>
<a display="initial" id="button" title="Click to show/hide content" type="button" onclick="document.getElementById('spoiler').style.display='block';">Show hidden content</a>
display="initial" isn't a valid attribute. Also, putting all of that code in the onclick attribute prevents you from reusing the code in other spoiler blocks. The best solution is to use a script tag for separation of concerns and reusability.
Here's the bare-bones of what you need:
<div id="spoiler" style="display:none">HIDDEN CONTENT HERE</div>
<a onclick="showSpoiler(this,'spoiler')">Show hidden content</a>
<script>
function showSpoiler(buttonNode, spoilerId) {
document.getElementById(spoilerId).style.display='block';
buttonNode.style.display='none';
}
</script>
I have a problem with PrettyPhoto
in inline content there is two div and one button.I want that when I clickedn button divisionImage will hide and divisionVideo will show. here is a codes inline content and div hide show function not working
<div id="inline-content" class="hide" style="text-align: center;">
<input id="btn1" type="button" name="btnCzmVideo" value="Çözüm Videosu"
onclick="VideoGoster()" />
<div id="divisionImage" style="text-align: center;">
<img id="imgCozumIcerigi" src="#" />
</div>
<div id="divisionVideo" style="display: none;">
</div>
</div>
function VideoGoster() {
$("#divisionImage").css('visibility', 'hidden');
$('#divVideo').show();
}
Problem Solved
actually divs hided and showed but u cant see
in prettyphoto modal when press right arrrow PrettyPhoto Content refreshed and your divs is hided and showed what you wanted.
send right arrow key or left arrow key to page programatically and problem was solved