I am trying to make it so that when I click an <a> tag a <div> appears on the first click and disappears on the second.
Easy enough right?
Just do this...
<a href ng-click="clicked=!clicked">Click me</a>
<div ng-show="clicked">
SOME CONTENT HERE
</div>
and that works perfectly.
But what I'm doing is setting a variable in Python equal to this <a href='"#"' ng-click='"clicked=!clicked"'>Click me</a> and then passing that through Flask into the front end (HTML). The passing works perfectly. It shows exactly the same code as I want it to (see below).
<a href ng-click="clicked=!clicked">Click me</a>
But for some reason, when I pass it, it loses the ng-show/ng-click functionality. When I click, nothing appears or disappears.
Why is this?
Related
There is a website with a navigation that makes segments appear/disappear on click. It is solved with basic onclick js (making all relevant segments fadeIn() and irrelevants fadeOut() or show()/hide()). This works like a charm thus I do not really intend to change it. The whole site is one single index.html.
I have to make another new.html which will also be available from the navigation, but it has to be separate. So no onclick, but usual href which directs to user to the new new.html. Nothing interesting so far.
The problem is when the user has to get back from new.html to index.html. When the user browses new.html and clicks on any of the navigation elements that brings them back to index.html but the onclick show-hide functions are not called, so the user finds themselves on the mainpage instead of the desired segment of index.html
So is there a way for a href to first load the target (index.html) and then the onclick js? I have found some solutions for the other way around (returning true not false from the onclick thus making it run and then do the href), but cannot find out this one. To be honest I am completely lost at this moment.
The navigation at index.html looks like this:
<div class="menu">
<div class="menu-home">Home</div>
<div class="menu-menu1">Menu1</div>
<div class="menu-menu2">Menu2</div>
<div class="menu-newsite">Newsite</div>
</div>
While the onclick-s are like this for every menu-item:
$('body').on('click', '.menu-menu1', function(){
$('.menu-home').hide();
$('.menu-menu1').show();
$('.menu-menu2').fadeOut();
});
On the new.html I want to have a menu like this:
<div class="menu">
<div class="menu-home">Home</div>
<div class="menu-menu1">Menu1</div>
<div class="menu-menu2">Menu2</div>
<div class="menu-newsite">Newsite</div>
</div>
This href+onclick might not be the solution, but this is the only might-be-possible way I have found in answers - though the other way around: onclick action first and then the href link.
I am using one of the bootstrap snippet for login dropdown box in the login box there is a link for Join Us I wanted that when i click on Join Us, the content within the box should get replaced by another box that contains login credentials
I modified the following code
New here ? <b>Join Us</b>
with the code below
New here ? <b>Join Us</b>
and created another content that had id signup-dp like this
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
Now when i click on the Join Us link the url of the page gets changed i.e #signup in the end of the url, but the content does not get displayed,
can anyone please tell how to do so
Please check jquery included or not.
Use return false like below
<b>Join Us</b>
#signup-dp{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>Join Us</b>
<div id="login-dp">login-dp</div>
<div id="signup-dp">signup-dp</div>
Its very simple and you code is working for me only.
<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show()">
<b>Join Us</b>
</a>
<a href="#" onClick="$('#login-dp').show(); $('#signup-dp').hide()">
<b>Login</b>
</a>
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
<ul id="login-dp" class="dropdown-menu">
// login data Inside this part
</ul>
Please follow this link . JSfiddle
Onclick jQuery is not working, So user Javascript code
New here ? <a href="#" onclick='document.getElementById("login-dp").style.display = "none";document.getElementById("signup-dp").style.display = "visible";'><b>Join Us</b></a>
Put the new hidden element somewhere before your existing element.
unless you write your jQuery code in $(document).ready(); in a separate file, or internal.
Your code is correct. But please check have you included jquery file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
This jquery should be included before the jquery code you have written.
Put following jquery code to make signup div initially hidden.
<script type="text/javascript">
$(document).ready(function(){
$("#signup-dp").hide();
});
</script>
First of all, for make good programming habit you have to bind click event instead of write javascript code inside of tag onClick attribute.
<b>Join Us</b>
In your javascript code (try to write code in other js file instead of inline code in HTML page.)
$(document).ready(function(){
$("#btn_join_us").click(function(e){
e.preventDefault();
$('#login-dp').hide();
$('#signup-dp').show();
return false;
});
});
This kind of code make some secure event binding. otherwise anyone can make change your code from inspect element and execute this.
As a preface, I am using PhoneGap. When I click on a Category Title, I have taken that title and set it in sessionStorage. Now, I want to set the "back" button of a new PhoneGap page (which displays some information contained in that category) to that Category Title. The HTML code is shown below. To be specific, I want to change the text of the "a" element within the "header" element.
I guess a part of my question is, does the fact that I am using PhoneGap change how I can access the anchor tag? I've been trying to set the back button text right after the Category has been selected/clicked on. I have tried multiple things like:
$("adviceBodyNavbarHeader a").text(sessionStorage.getItem("catTitle"));
but I can't quite get it working, and it is getting quite frustrating =/
<div data-role="view" id="adviceBody" data-title="Advice Body" data-show="GetAdviceBody" data-transition="slide">
<header data-role="header" id="adviceBodyNavbarHeader">
<div class="navHeader">
<a class="nav-button" data-view="adviceTitles" data-align="left">Back</a>
<span id="adviceTitle" class="navTitle"></span>
</div>
</header>
<ul id="advice-body" data-role="listview">
</ul>
</div>
Your selector is wrong. You try to select a html element called adviceBodyNavbarHeader.
What you want to do is this: $('#adviceBodyNavbarHeader').text(sessionStorage.getItem("catTitle"));
Hope it helps.
Edited my post due to late brain inactivity.
I want to change the text of a link using javascript. The problem is this particular link does not have an id. I am unable to change the html, as this is a SharePoint page, and this particular link is created by a page layout, which I do not have access to. Using IE Developer Tools, I see that the HTML surrounding the link is this:
<span id="DeltaPlaceHolderPageTitleInTitleArea">
<span>
<a href="#ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink">
<img width="0" height="0" style="border-width: 0px;" alt="Skip Navigation Links" src="" /></a>
<span>
<a title="State-Compliance" href="/sites/tax/Compliance/SitePages/State-Compliance.aspx">State-Compliance</a>
</span>
<a id="ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink"></a>
</span>
The link I wish to change is the second one, the one with "State-Compliance" for the tooltip.
I looked at jQuery, and found I could use $('#DeltaPlaceHolderPageTitleInTitleArea').find("a").text("Test"); to change the text, but it changes the text of all three links. How can I change just the one? Do I need to iterate through the three, or is there an easier way of getting the link I wish to change?
Sorry if this is a stupid question, I'm a c# developer, and this is my first experience using javascript.
Let me know if you need more information.
Warren
Use .eq():
$('#DeltaPlaceHolderPageTitleInTitleArea').find("a").eq(1).text("Test");
jsFiddle example
How about this, using the attribute equals selector:
$('#DeltaPlaceHolderPageTitleInTitleArea a[title="State-Compliance"]')
I am new to learning js and having a problem with the following:
I have a custom block on my page that looks like this...
<div id="chat">
<iframe src="/sites/all/libraries/webim/client.php?locale=en"
height="100%" width="100%">
</iframe>
</div>
<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>
And a function in my script.js file that looks like this...
jQuery(function() {
jQuery(".toggleup").click(function(){
jQuery("#chat").slideToggle("slow");
jQuery(this).toggleClass("toggledown");return false;
});
});
The issue at hand is that client.php returns 2 variations of a page, both of which contain close buttons that execute:
javascript:window.close();
Which I have changed to:
javascript:window.parent.jQuery('.toggleup').click()
When the JavaScript is executed, the chatbox slides closed as it should, but then all I see is:
[object Object]
where my Iframe content should be.
What am I doing wrong?
I don't really get what you are trying to do :).
All I can say for now is that using inline tags for scripts is not a good idea, try to enhance the page from inside the script.js. Are you trying to fire the click on the .toggleup with .click()? This won't work since the .click() function registers a handler for the selected object(s) - in this case you are adding an undefined handler as there are no arguments supplied. If you want to trigger the event on the element use .trigger('click'); instead. The [object Object] thingy is the string representation of an object so I think somehow you assign a stringified object to the iframes src.
Thats all I can say for now, if you specify a little more what you want to do I will try to help you :)
The problem was that I had these two elements in my custom block and both needed to be executed for everything to work.
<div id="chat">
<iframe src="/sites/all/libraries/webim/client.php?locale=en"
height="100%" width="100%">
</iframe>
</div>
<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>
However when calling the jQuery function like this...
javascript:window.parent.jQuery('.toggleup').click()
instead of clicking the link, the box would close as expected but the div and iframe are never created.
Instead I changed the following line in my custom block from...
<a class="toggleup" href="#">Live Support</a>
to...
<a class="toggleup" href="#" id="chatbtn">Live Support</a>
and called it using
parent.document.getElementById('chatbtn').click();
instead of the previous jQuery code therefore executing everything in my custom block and not just the jQuery for closing the slide.
Hope it helps someone.
: