I'm trying to get my webpage to use the kind of color box that is demoed on this website here.
http://www.jacklmoore.com/colorbox/example2/. (Outside HTML ajax Example).
In their code for this, they have:
$(".ajax").colorbox();
targeting:
<p>
<a class='ajax' href="../content/ajax.html" title="Homer Defined">
Outside HTML (Ajax)
</a>
</p>
My question is, I want the colorbox to display another page I have, when I click this Icon span on my page.
<span id="pause">
<i class="fa fa-pause"></i>
</span>
I've used on() to make it so when it's clicked it runs a function.
$("#pause").on("click", function() {
game.pause();
});
Where as game.pause(); will create this effect, but I'm not sure how to make it happen, because I am not using a link like the examples.
Related
On an xpage I have an editbox control and xe:namepicker nicely grouped beside each other with a Bootstrap add-on component.
However I would like to trigger the xe:namepicker when the cursor enters the editbox.
In the DOM I see that for the namepicker an anchor link is generated such as:
a class="glyphicon glyphicon-user xspPickerLink" href="javascript:;"
And I could trigger the click event via csjs
$("a.xspPickerLink").trigger('click');
But I happen to have multiple xe:namepicker-s on my xpage.
Does anyone have a clue how I can trigger a SPECIFIC xe:namepicker ?
You can work with wrapper elements:
<div id="namePicker1Wrapper">
<xe:namePicker id="namePicker1" pickerText="Select..."></xe:namePicker>
</div>
<div id="namePicker2Wrapper">
<xe:namePicker id="namePicker2" pickerText="Select..."></xe:namePicker>
</div>
Now you have the opportunity to select a SPECIFIC xe:namepicker:
$("#namePicker1Wrapper a.xspPickerLink").trigger('click');
So, I have been given an admin built in php and I was asked to implement an already done admin built in aspx into the new one(changing the css and so), the thing is that i want to dynamically "insert" into the main admin structure which is made in php only the part that's gonna be run in aspx, I made a reserach and found out that the way to do it was using file_get_contents and yeah it works, the thing is that i want that to show after I click on a link so I put the f_g_c into a js function to do so, the thing is that it doesnt work, it doesnt insert anything, it does it outside a function, but inside it just won't
<li class="active">
<a id="solicitud" href="" >
<i class="fa fa-file-text-o"></i>
<span>Solicitudes</span>
<span class="label label-primary label-circle pull-right">2</span>
</a>
var li = document.getElementById('solicitud');
li.onclick = aparecer();
function aparecer() {
<?php
$hola= "./solicitudAAA.aspx";
?>
var lo = document.getElementById('container');
lo.innerHTML ="<?php echo file_get_contents($hola); ?>";
return false;
}
above there are the section of code or well the link i want to click so it shows the aspx and the second section of code is the actual script, i don't know what I'm doing wrong and why inside the scriptit won't work, thanks for your answers!
The problem with your code has something to do with your link's href. A blank href in your anchor tag will refresh the page causing the onclick in your script to not work. How about adding the following:
<a href="javascript: void(0)" id="solicitud" onclick="aparecer();">
<i class="fa fa-file-text-o"></i>
<span>Solicitudes</span>
<span class="label label-primary label-circle pull-right">2</span>
</a>
To make things easier, add the function to the onclick attribute of the anchor tag to call the function rather than coding it inside the script.
Since onclick attribute(that contains the calling of function) is added to the anchor tag, you can remove this in the script:
var li = document.getElementById('solicitud');
li.onclick = aparecer();
I hope this helps!
I have Clipboard.js working fine on my test site, I can copy using data-clipboard as such.
<a href="#">
<i class="icon-link icon-1x fa-fw" id="d_clip_button_x" data-clipboard-text="copythistext" title="Copy direct link"></i></a>
<script type="text/javascript" src="copy/clipboard.min.js"></script>
<script type="text/javascript"> var client = new Clipboard( document.getElementById('d_clip_button_x') );</script>
But when I have content from an Ajax call the same code no longer functions. I have read some ways and tutorials on how to get Ajax to work well with Clipboard.js but I can't seem to wrap my head around it. As I understand it I need to retrigger the function, but how can I achieve that?
Thanks.
i tried on my end. clipboard.js uses extensive triggers to get the data attribute and binds when the page finishes loading.
so, in case the data is fetched from ajax, clipboard, won't binds them as u wish to.
for the solution, here is the trick.
first of all, make one generic copy button which works, give it a ID, suppose we give is d_clip_button_villa_XXX.
<a style="display:none" href="javascript:void(0);"> <i class="icon-link icon-1x fa-fw" id="d_clip_button_villa_XXX" data-clipboard-text="" title="Copy direct link"> </i> </a> <script type="text/javascript"> var client = new Clipboard( document.getElementById('d_clip_button_villa_XXX') ); </script>
now, instead of making same buttons, use any element like <a> tag and mention 2 events->
copy
now make two functions->
function copytxt(txt){
jQuery('#d_clip_button_villa_XXX').attr('data-clipboard-text', txt);
}
function clkd(){
jQuery('#d_clip_button_villa_XXX').click();
}
this will work with ajax also
I'm coding a little bot that auto like's a post on a new social network.
So now my problem is that when I'm tring to click on the like button, it doesn't click. I've tried all, C# code, Javascript etc etc.
This is the Html Page Code :
<div class="stats_wrapper like_stats_wrapper ">
<span class="like_button like_stats_span sprite_icon">
</span>
<span class="count like_count like_button">
Like
</span>
</div>
I need to trigger the click event on this element using code.
jQuery has some simple functionality to trigger a click, or any other event you so wish:
$('.count.like_count.like_button').trigger('click');
https://api.jquery.com/trigger/
I've made the next html code -
<a class="list-group-item">
<p class="list-group-item-text"></p>
<p class="btn btn-info" href="javascript:;" ng-click="onclick(alert('Hello world!'));">Hi world</p>
</a>
How can I make the with the 'btn' class be clickable? (meaning see the hello word alert)
Thanks for any kind of help
From your sample it looks like you're trying to use an anchor element to have a list of text and following buttons? Why not just put the ng-click on the Anchor element and apply the bootstrap class of btn to that?
I do believe the issue you have with your sample is that the anchor is catching the click event as opposed to the nest element, as they're not meant to be used as containers.