I can very easily go and find some "reveal div text onclick" JavScripts, they are all over the internet (and I've tried dozens of them in different ways). But my problem is a little more difficult and I cant work out what to do. No matter how I try to implement such javascripts, I can't get a message to show up. I have this slightly modified twitter "follow me" code: From Here <p><?php echo '<a href="https://twitter.com/'.$_GET['user'].'" class="twitter-follow-button" data-show-count="false">Follow @'.$_GET['user'].'</a>' ?> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></p> Code (markup): It is merely the twitter follow me button code, except that I have changed the user to come from a $_GET['user'] (from the browser url). All I am trying to do is make a div appear once someone clicks that link to subscribe. ie: I don't want the site visitor to be able to continue until they have subscribed to that button. I've been trying different things for hours. I am exhausted of possibilities. So I have come to ask for help. Or, if I am going the who,e wrong way about it, I am all ears. At the end of the day I just don't want the user to be able to continue or find the enxt step until I know they have subscribed.
<script type="text/javascript"> function showDiv() { document.getElementById("divID").style.display="inline"; } </script> <a href="URL Shit Here" onclick="showDiv();">Text Here</a><br /> <div id="divID" style="display:none;"> <!-- Stuff inside div here --> </div> Code (markup):
"All I am trying to do is make a div appear once someone clicks that link to subscribe. ie: I don't want the site visitor to be able to continue until they have subscribed to that button." Okay the click a link and a div appears. If you want it to do something different be more specific.
"make a div appear once someone clicks that link to subscribe". That is pretty specific. What more do you need to know? That code above (that you provided) is a functional show/hide javascript (as I have stated I have tried to implement dozens from all over the internet - both CSS and JS).. but I can't manage to implemet it in the way I have described. >"make a div appear once someone clicks that link to subscribe"< I am not asking for a generic showhide script (they are all over the Internet and I know how to use them and I understand how they work).. I am trying to get the div to appear if the twitter subscribe button is clicked ie: "make a div appear [ie: with information that wasn't there before the twitter subsribe button was clicked] once someone clicks that link [the "twitter" subscribe link] to subscribe".. I don't understand what is confusing.
I still don't understand exactly what you want. You want a script that makes a div appear when someone clicks a link to subscribe to someone on Twitter. With that script with they click the link to subscribe to someone on Twitter the div is shown. Are you saying that you want information that wasn't there on the page at all (not even shown hidden in the View Source of the page) once a user clicks on the link. Because to do that you are more than likely going to need to user a server-side language such as PHP and if you're wanting it to happen without loading information onto a new page you're going to need to use AJAX.
I just want a hidden div to become available once someone clicks the twitter subscribe button. I know that I can use show/hide scripts (I've tried various JS and CSS ones).. do show/hide div's -- but in this case I need that action to be performed when someone clicks the twitter subscribe button. I have been unable to implement the workings of any JS/CSS show/hide functionality into that twitter button. All I am trying to hide is a "continue" link or button. ie: The site visitor will not be able to continue until I know that they have clicked on that subscribe button. In the script you have provided above.. (and I have tried a heap just like it)... I have tried to put the onclick="showDiv();" in various places in the twitter button, but no matter what I try or how I try it, I can't get that hidden div to appear.
Did you try putting a div around the link with the onclick event? If so I think you're only option is to have an onclick event on the body. You would have to find the coordinate range for the Twitter button and try to match the coordinates of the mouse when the onclick body event is launched to see if they are clicking on the button. I'm not sure how that function is effected exactly with larger screen resolution so I'm guessing you'd have to use position: absolute on the link to make sure it's in the same coordinates for every user.
I just tried that mate.. it works, if i click 1 pixel away from the button. But if I click the actual button it doesn't work. I also tried inserting: document.getElementById("divID").style.display="inline"; Code (markup): ..directly into the twitter script code, but that didn't do anything either :|
..also I tried keeping the javascript function in the head and inserting: showDiv(); Code (markup): ..into the twitter script. That didn't wortk either. I might be reduced to adding a 60 second timer onto the page, and they can't continue until 60 seconds has passed. But that would be really unprofessionaland I'd probably lise 1/2 the followers. *sigh* ..nothing is ever easy. *wonders what do do next*
Then I would use Twitter's API to see if the user viewing the page is following a given user and if they are display something, if not, don't. Other than that you can get the coordinates of the user every time they click on the page. And if the coordinates match up with where the Follow button is to complete a JavaScript action. The first idea would be better though because you could write it in a server-side language that prevents the user from just being able to view the source code and see what is going to come up once they follow. EDIT: https://dev.twitter.com/docs/api/1/get/friendships/exists
My guess is that, since the twitter-button is an inserted js, the stuff you're trying to implement doesn't actually find the twitter-buttons HTML when looking for it in the DOM. So you need to do some mumbo-jumbo either by delaying the functions until the Twitter js is loaded (might work), or modifying the actual twitter.js-file.
I don't understand why you're trying so hard to do this in JS when it could easily be seen without following the account when you could just do it in PHP using the Twitter API and have it protected
have u tried writing on response of that click button .. like it might be an ajax call.. so any chance on doing something after response reached