On my base.html I have 2 links which lead to the same post_form.html and use the same forms.py.
Link:
<a class="list-group-item list-group-item-light" href="{% url 'post-create' %}">Submit</a>
Problem is, I would like to hide/show part of the page depending on which link did user select. How can I do that? Below is script I use to hide a field, but I don't know which link did they use. (currently the links are the same, don't know what to add to make a change on the page 'post_form.html)
<script type="text/javascript">
function on_load_1(){
document.getElementById('div_id_type').style.display = 'none';}
on_load_1();
</script>
Related
I'm trying to create an <a> link in html page 1 that takes the user to html page 2. After html page 2 loads, I want a drop down function to execute. Essentially it is a link from html page 1 to drop down in html2.
I am not very good with javascript, but I've tried anything I could find so far and nothing works. The link between the pages works, but I cannot get the drop down function to execute on load of html page 2.
Any help would be greatly appreciated
HTML Page 1
<a class="link2index" href="index2.html#test" onclick ="f();return false;">Read more about technology hubs in South Africa</a>
<script>
function f(){
testwindow = window.load("index2.html#test"); //this is working to load but not to load the dropdown
//testwindow.addEventListener('click', myFunction38()); not working
//window.onload = myFunction38 ()
//testwindow.addEventListener('load', myFunction38()){
//document.getElementById("myDropdown38").classList.toggle("show");}; not working
//window.open('index2.html');
//window.somefunction = myFunction38(){
//document.getElementById("myDropdown38").classList.toggle("show");} not working
}
</script>
HTML Page 2 to where I'm targeting
<div class="dropdown">
<button id="test" onclick="myFunction38()" class="dropbtn">Cape Town</button>
<div id="myDropdown38" class="dropdown-content">
<a href="#">
<img src="media/capetown.jpg" alt="South Africa">
Cape Town-based Labsorganises digital and entrepreneurship bootcamps, and provides an investment of up to $20,000 for every social enterprise developed through their program.
</a>
</div>
</div>
<script>
function myFunction38() {
document.getElementById("myDropdown38").classList.toggle("show");
}
</script>
Basically you can use the window.onload function to run some JavaScript to dynamically add html to your body and show a "drop-down".
But since html2 can be reached in other ways(like bookmark or copy/paste into browser) and not just through hyperlink inside html1, you could also append some query string or fragment in html2 when it is loaded from html1 (append it to the href of a tag). Inside the onload function you can then check if the same exists and decide whether or not to show drop-down.
I will not be giving a code since the functionality is vaguely defined in the question. But this should help you solve it on your own.
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.
List item
I am using the following code to hide a div and show the other.
page1
<a id="show" href="2#dk" onclick='document();'>mylink</a>
<a id="show1" href="2#dh" onclick='document();'>mylink</a>
page 2
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("dk").show();
$("dh").hide();
});
$("#show1").click(function(){
$("dh").show();
$("dk").hide();
});
});
</script>
</head>
<body>
<div id="dk">mylink</a>
<div id="dh">mylink</a>
</body>
</html>
This works on one page but not after the anchor tag loads up another page.
PREMISE
I have pages:-
first
second
I want links on on page and divs on second page
frist page links
divs
OBJECTIVE
If the page is first page, links need to be on this page
If the page is second page, then I wish to hide the divs that are not link to the link thats clicked
you can see here what i mean even i will put account detials that ppl can look at code and try if they want
http://testscripten.enjin.com/login
username:testscripten
password:test12345
go to admin and then edit
page layout and next to text will a pencil to change html or java
I think you can use window.location.href to get the link of the page you're currently on and then accordingly hide/show your buttons.
JAVASCRIPT
var pageName = window.location.href;
$(document).ready(function(){
if(pageName === "dh"){
$("#show").show();
$("#show1").hide();
} else if(pageName === "dk") {
$("show1").show();
$("show").hide();
}
});
HTML
<a id="show" href="dk">mylink</a> <!--No need for onclick if you're using jQuery-->
<a id="show1" href="dh">mylink</a> <!--No need for onclick if you're using jQuery-->
I am not sure of "dk" and "dh" being real links, if you have kept those as placeholders then this should work.
Simply show/hide based upon the path name containing the strings you specify:
$(document).ready(function(){
$('div.toShowOnFirstPage').toggle(location.pathname.indexOf("first")!== -1);
$('div.toShowOnSecondPage').toggle(location.pathname.indexOf("second")!== -1);
});
use AngularJS and SPA model to avoid page reload.
You can use also variables in url
If you need to reload page and have values on different pages you have to set cookie or webStorage http://www.w3schools.com/html/html5_webstorage.asp
Why don't you use php?
I'm trying to make a custom Twitter button that will grab the page URL of the current page when clicked, which would obviously change dependent on which page it appears on, not unlike the default share button. However, I am unsure how to pass the page URL into the button.
This is what I have thus far jsfiddle
<style type="text/css" media="screen">
</style>
<div id="social-share-container">
<div id="custom-tweet-button">
<a id="tweetShare" href="https://twitter.com/share?url="+encodeURIComponent(document.URL); target="_blank">Tweet
</a>
</div>
</div>
It's a bit hacked together as I'm pretty unfamiliar with JS.
This passes the url and title to a simple pop-up box with the twitter share page:
<script language="javascript">
function tweetCurrentPage()
{ window.open("https://twitter.com/share?url="+ encodeURIComponent(window.location.href)+"&text="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false; }
</script>
<a class="tweet" href="javascript:tweetCurrentPage()" target="_blank" alt="Tweet this page">Tweet this page</a>
If you don't want it to open in a popup box, you can use this instead of window.open:
window.location.href="https://twitter.com/share?url="+ encodeURIComponent(window.location.href)+"&text="+document.title;
Update:
escape() function is deprecated, Replaced with encodeURIComponent()
I would suggest window.location - That will give you the current page url.
Problem is you're using JS inline in HTML - you can't do that like you're wanting to.
I updated your fiddle with some vanilla js to show you a better way to do this.
http://jsfiddle.net/4jF5N/1/
var link = document.getElementById('tweetShare');
var url = window.location;
link.addEventListener('click',function(event){
event.preventDefault();
window.open("https://twitter.com/share?url="+encodeURIComponent(url));
alert(url)
},false);
Take a look on document.location:
location.hostname
location.pathname
http://www.w3schools.com/jsref/obj_location.asp
On a page I have a Tweet button, like this:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
The problem is that in the bubble with counts of tweets is the value 2197, which is incorrect.
How to put there the correct value?
Thanks
The problem is that you're specifying:
<a ... data-url="false" .../>
Twitter reads this value as the URL you're wanting to share, and is ultimately under the impression that the URL "false" has been shared 2,197 times. If you want to share a static URL, this attribute must relate to the URL of the page you're wanting users to Tweet about. If your page was http://example.com, for instance, you'd use:
<a ... data-url="http://example.com" .../>
(Which has been shared 1,492 times).
If you want to share the URL of the page the button is added to, you'd simply remove the data-url parameter altogether:
<a href="https://twitter.com/share"
class="twitter-share-button"
data-lang="en"
data-count="horizontal"
data-text="#{tw_listing(#data)}">Tweet</a>
If you need help with creating your Tweet button, you should refer to the official creation page at twitter.com/about/resources/buttons.