When we click on an anchor tag it should call the jquery function which is in external file but i don't know how to call a click function externally.
This is my code:
php
<html>
<head>
<script type="text/javascript" src="js/loc.js'">
</script>
</head>
<body>
<div id="locname">
<ul class="loct" >
<li >
<a href=# class="c" >Camp
</a>
</li>
</ul>
</div>
</body>
</html>
js file
$(document).ready( function() {
var $flag='0';
$(".c").on("click",function(event){
var $trigger = $(".c");
if($trigger !== event.target &&
!$trigger.has(event.target).length)
{
if($flag=='0')
{
$flag='1';
$(".co").fadeToggle("fast");
}
else if($flag=='1')
{
$flag='0';
$(".co").fadeToggle("fast");
}
}
});
}
}
Above code is working fine now
First of all, you do not need to wrap your JS code in <script></script> if your file's extension is .js
Solution: Update your JS file with the following code
var $flag='0';
function myFunction(event){
var $trigger = $(".c");
if($trigger !== event.target &&
!$trigger.has(event.target).length)
{
if($flag=='0')
{
$flag='1';
$(".co").fadeToggle("fast");
}
else if($flag=='1')
{
$flag='0';
$(".co").fadeToggle("fast");
}
}
};
Your anchor tag should be:
Camp
Also, since you're using jQuery, make sure you include jQuery library as well.
You can do like this
HTML file
<html>
<head>
<script type="text/javascript" src="<?php echo base_url('js/loc.js');?>">
</script>
</head>
<body>
<div id="locname">
<ul class="loct" >
<li >
<a href=# class="c" onclick= "externalFunction(this);">Camp
</a>
</li>
</ul>
</div>
</body>
</html>
JS file
<script type="text/javascript">
$(document).ready( function() {
var $flag='0';
function externalFunction(event){
var $trigger = $(".c");
if($trigger !== event.target &&
!$trigger.has(event.target).length)
{
if($flag=='0')
{
$flag='1';
$(".co").fadeToggle("fast");
}
else if($flag=='1')
{
$flag='0';
$(".co").fadeToggle("fast");
}
}
});
}
}
<script>
I thing it will help you.
Related
I am trying to change the color of "well" on mouseover but unable to do it. I have been trying with the following codes:
<script type="text/javascript">
function ChangeColor(well, highLight)
{
if (highLight)
{
well.style.backgroundColor = '#dcfac9';
}
}
</script>
PHP:
echo " <div class=\"well\" onmouseover=\"ChangeColor(this, true);\"\n";
echo " onmouseout=\"ChangeColor(this, false);\"> \n";
echo "something";
echo " </div>\n";
The above code is changing color nicely on mouseover but it is crossing the area of the "well". Please help to fix it.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="well">
<p>
This is a well content
</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(".well").mouseenter(
function(){
$(this).css('background-color','red');
});
$(".well").mouseleave(
function(){
$(this).css('background-color','#f5f5f5');
});
</script>
Doing this through JavaScript seems like overkill. This can easily be done simply through the use of CSS:
.well:default
{
background-color: #ccc;
}
.well:hover
{
background-color: #000;
}
var getDefaultBg = $(".well").css("background");
$(".well").mouseover(function() {
$(this).css("background", "#000");
}). mouseout(function() {
$(this).css("background", getDefaultBg);
});
simply use this for your requirement.
That was the script I wanted:
<script>
$(document).ready(function(){
$(".well").mouseenter(function(){
$(this).css("background-color", "#efefef");
});
$(".well").mouseleave(function(){
$(this).css("background-color", "#f5f5f5");
});
});
</script>
I have this javascript :
<script type="text/javascript">
$(document).ready(function($) {
$('#target-share ul li').click(function() {
$('input#shareto').val($(this).data('val'));
});
});
</script>
and it really works as I expected. but when I add this another javascript to do drop-down animation, that javascript not working anymore :
<script type="text/javascript">
$(document).ready(function() {
$("#select-shareto a").click(function () {
var newClass = $(this).find("span").attr('class');
var newText = $(this).find("span").text();
$("#select-shareto a").removeClass("selected");
$(this).addClass("selected");
$("a#to-chosen span").removeClass().addClass(newClass).text(newText);
$("a#to-chosen").toggleClass("opened");
$('#select-shareto').slideToggle('fast');
return false;
});
$('a#to-chosen').click(function() {
$(this).toggleClass("opened");
$('#select-shareto').slideToggle('fast', function() {
// Animation complete.
});
});
});
</script>
those javascript actually affected on this HTML code :
<div id="target-share">
<span class="to-admin">Admin</span>
<ul id="select-shareto">
<li data-val="0-1">
<span class="to-Finance">Finance</span>
</li>
<li data-val="1-1">
<span class="to-admin-private">Admin Private</span>
</li>
<li data-val="1-0">
<span class="to-ceo">CEO</span>
</li>
<li data-val="0-0">
<span class="to-ceo-private">CEO Private</span>
</li>
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->
any idea how to make those 2 javascript works side-by-side? thanks.
$("#select-shareto a").click(function () {
...
return false;
});
Hereby, you stop the further propagation of this event - other handlers for this click event won't be called any more. Instead, use this:
$("#select-shareto a").click(function (e) {
e.preventDefault();
...
});
(Demo at jsfiddle.net)
I'm assuming you tried to insert the code where the comment animation complete is and if so you just need to put the code:$('#target-share ul li').click(function() { $('input#shareto').val($(this).data('val'));});
Your code is already wrapped in a $(document).ready so you don't need another one.
I am using a menu collapsing javascript in my wesite in which when i click in the title called member the list of members must be shown down the member as accordion.In firefox and chrome it is working quite well but when i tested with IE8 all the members are showing before clicking the member title.Can some one help me is this a browser compatibility issue or something else.Hope i will get the answer soon.
This is the function which is in the js page.
//menu-collapsed.js
<script type="text/javascript">
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
</script>
and the html page is:
<html>
<head>
<script src="includes/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="includes/menu-collapsed.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var page={};
$(function() {
new FrontPage().init();
});
//]]>
</script>
</head>
<body>
<ul id="menu">
<li>
<?php
$mvo=new menuVO();
$mdao=new menuDAO();
$menus=$mdao->fetchAll('onlypublished');
foreach($menus as $menu)
{
if($menu->menu_type=='Member')
{
echo "$menu->name";
}
}
$mvo=new membersVO();
$mdao=new membersDAO();
$list=$mdao->fetchAll('onlypublished');
echo "<ul>";
foreach($list as $members)
{
echo "<li><span>$members->name</span></li>";
}
echo "</ul>";
?>
</li>
</ul>
</body>
</html>
Put up your code. You may also find your answer trying to learn how to make one.
i have a link that needs to be triggered from a success post:
<?php
if ($_POST["action"] == "1") {
?>
<script type='text/javascript'>
$(window).load(function() {
$(".likepic").click();
});
</script>
<?php } ?>
<script type='text/javascript'>
$(window).load(function() {
$(".likepic").click(function(){
$(".likepic").colorbox({width:"620px", height:"570px", inline:true, href:"#likepic_lightbox"});
});
});
</script>
<div class="blackk" style="display:none;">
<div id="likepic_lightbox">test
</div>
</div>
so if that post action is 1 then run the jquery script and click on the link for something else to happen :)
this is what i tried but without success.
any ideas?
Thanks
Try using $(document).ready() instead of $(window).load()
Also, you'll need to switch the order of your JavaScript blocks. The click handler needs to be defined first.
Play with a test version here: http://jsfiddle.net/irama/bcMp7/
Or see updated code below:
<script type='text/javascript'>
$(document).ready(function() {
$(".likepic").click(function(){
$(".likepic").colorbox({width:"620px", height:"570px", inline:true, href:"#likepic_lightbox"});
});
});
</script>
<?php if ($_POST["action"] == "1") { ?>
<script type='text/javascript'>
$(document).ready(function() {
$(".likepic").click();
});
</script>
<?php } ?>
<div class="blackk" style="display:none;">
<div id="likepic_lightbox">test</div>
</div>
Let us know how you go!
I'm reading up all I can on jQuery, but this week I like(need) to finish a website and I could find a solution to this problem in the last eight hours.
Setting
I'm using a ajaxed wp theme which I'm customising to my own liking.
Problem
I've wrote a simple function to change the header image and the header text when you click on the main navigation links.
The function does work in the header.php but doesn't work in a custom front page (main_navp.php) I've included in index.php.
On navp.php there's an image when onclicked should do the same changes as a click on the nav bar.
index.php
<?php get_header(); ?>
<div id="main-content"><div id="inside">
<?php get_template_part('main_navp'); ?>
<?php if// HERE IS THE WP LOOP (not used so left out) //?>
<div class="pagination">
<span class="older"><?php next_posts_link('« Older Entries') ?></span>
<span class="newer"><?php previous_posts_link('Newer Entries »') ?></span>
</div>``
<?php else : ?>
<h1>no posts...</h1>
<?php endif; ?>
</div></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The function is included in the header.php in the ..head>
<script type="text/javascript">
$(document).ready(function()
{
$("a[title='Gigs']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/gig_header_flip.png)");
$("a#nav_text").html("Gigs");
});
$("a[title='Bio']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/play_header.png)");
$("a#nav_text").html("Biography");
});
$("a[title='Gitaarles']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
$("p[id='les_mp']").live("click", function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
$("li[id='homew']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/header_arty.png)");
$("a#nav_text").html("Home");
});
});
</script>
In the main_navp.php (included in index.php afther the header.php) the function does not work on this item. But it should be triggered by $("p[id='les_mp']").live("click", function() as seen above.
<div id="boxred_b">
<div class=head_box><a>Gitaarles</a></div>
<p class="homeles" id="les_mp">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/les_mp.jpg" />
</p>
The main jquery is caled in the header.php
<script src='<?php bloginfo('template_directory'); ?>/js/jjquery-1.5.2.min.js'></script>
In the footer.php are all of the rest of the jquery functions.
<!-- http://benalman.com/projects/jquery-urlinternal-plugin/ -->
<script src='<?php bloginfo('template_directory'); ?>/js/jquery.ba-urlinternal.min.js'></script>
<!-- http://www.asual.com/jquery/address/ -->
<script src='<?php bloginfo('template_directory'); ?>/js/jquery.address-1.3.2.min.js'></script>
<script>
// Original JavaScript by Chris Coyier
// Updated October 2010 by Stewart Heckenberg & Chris Coyier
$(".home li.home").removeClass("home").addClass("current_page_item");
$("#column-wrap").append("<img src='<?php bloginfo('template_directory'); ?>/images/ajax-loader.png' id='ajax-loader' />");
$("#s").focus(function() {
if ($(this).val() == "Search...") {
$(this).val("");
}
});
if ($(".widget_categories li").length%2 != 0) {
$(".widget_categories ul").append("<li><a> </a></li>");
}
if ($(".widget_tag_cloud a").length%2 != 0) {
$(".widget_tag_cloud").append("<a> </a>");
}
// The reason this JavaScript is in footer.php instead of its own file is basically the next line.
var base = '<?php bloginfo('url'); ?>',
$mainContent = $("#main-content"),
$ajaxSpinner = $("#ajax-loader"),
$searchInput = $("#s"),
$allLinks = $("a"),
$el;
$('a:urlInternal').live('click', function(e) {
$el = $(this);
if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {
var path = $(this).attr('href').replace(base, '');
$.address.value(path);
$(".current_page_item").removeClass("current_page_item");
$allLinks.removeClass("current_link");
$el.addClass("current_link").parent().addClass("current_page_item");
return false;
}
// Default action (go to link) prevented for comment-related links (which use onclick attributes)
e.preventDefault();
});
$('#searchform').submit(function() {
var s = $searchInput.val();
if (s) {
var query = '/?s=' + s;
$.address.value(query);
}
return false;
});
$.address.change(function(event) {
if (event.value) {
$ajaxSpinner.fadeIn();
$mainContent
.empty()
.load(base + event.value + ' #inside', function() {
$ajaxSpinner.fadeOut();
$mainContent.fadeIn();
});
}
var current = location.protocol + '//' + location.hostname + location.pathname;
if (base + '/' != current) {
var diff = current.replace(base);
location = base + '/#' + diff;
}
});
</script>
</div>
I've tried to keep things as short as possible. If you like any more information please ask.
-update
using the live function in the header doesn't seem to solve the problem.
I'm using XAMPP to run the website locally. If it helps I could make an online wp installation or could provide the webside (html/java) source.
Because you are Ajax-ing your page, the events are not subscribed to your new elements. Try using the .live() command.
Also, is this ok?
$("p[id='les_mp']").click(, function()...
Don't know for sure about that comma.
I've tried using the live function in the code like this.
$("p[id='les_mp']").live("click", function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
in the
$(document).ready(function()
{ .... }
in header.php
Still it doesn't work when be onclicked in main_nav.php
When I put the code out of the main_nav in to the header.php
it works.
You may want to use the method in the link below to refactor the ajax stuff to a separate file. Not sure if it helps with the original problem, but i've seen things work after doing that http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/#js-global
basically you get your url into a variable that is being printed and your scripts have access to using wp_localize_script