Jump to content

Popup in Wordpress site


harry_ord

Recommended Posts

Hello

 

This is my site made on Wordpress, the theme was made by other people:

http://www.endeavor.cl/

I need to add a popup in the home section, so i installed some popup plugins and neither of them worked, i even tried using the echo do_shortcode[''] function of Wordpress and it doesn't work either.

The i tried to use bootstrap modals, i just copied the example we have on w3schools and the button doesn't respond, the popup won't appear.

So i decided to use jquery-ui:

https://jqueryui.com/dialog/

It doesn't work either, it's like something in the theme is preventing to have anything poping-up in the page.

At the end i tried a Javascript alert() and only that worked.

Well, how can i make jquery-ui work on this page?

Here is my header.php where i included the script:

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>
<!-- the default values -->
<meta property="fb:app_id" content="570150036476648" />
 
<!-- if page is content page -->
<?php
if (in_category('categoria-videos')) { ?>
    <meta property="og:url" content="<?php the_permalink() ?>"/>
    <meta property="og:title" content="<?php single_post_title(''); ?> | <?php bloginfo('name'); ?>" />
    <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
    <meta property="og:type" content="article" />
    <meta property="og:image" content="http://i.ytimg.com/vi/<?php the_field('video-youtube-id'); ?>/hqdefault.jpg" />
    <meta property="og:image:width" content="300"/>
    <meta property="og:image:height" content="300"/>
<?php } elseif (is_single()) { ?>
    <meta property="og:url" content="<?php the_permalink() ?>"/>
    <meta property="og:title" content="<?php single_post_title(''); ?> | <?php bloginfo('name'); ?>" />
    <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
    <meta property="og:type" content="article" />
    <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'medium' ); ?>
    <meta property="og:image" content="<?php echo $feat_image;?>" />
    <meta property="og:image:width" content="300"/>
    <meta property="og:image:height" content="300"/>
<?php } elseif (is_page()) { ?>
    <meta property="og:url" content="<?php the_permalink() ?>"/>
    <meta property="og:title" content="<?php single_post_title(''); ?> | <?php bloginfo('name'); ?>" />
    <meta property="og:description" content="Endeavor lidera el movimiento global que busca impulsar el crecimiento económico sostenible, a través de la selección de Emprendedores de Alto Impacto" />
    <meta property="og:type" content="article" />
    <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
    <meta property="og:image" content="<?php bloginfo('template_directory'); ?>/template/FotoShare.jpg" /> 
    <meta property="og:image:width" content="450"/>
    <meta property="og:image:height" content="298"/>
<?php } elseif(is_home()) { ?>
    <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
    <meta property="og:title" content="Endeavor Chile | www.endeavor.cl" />
    <meta property="og:description" content="Endeavor lidera el movimiento global que busca impulsar el crecimiento económico sostenible, a través de la selección de Emprendedores de Alto Impacto" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="<?php bloginfo('template_directory'); ?>/template/FotoShare.jpg" /> 
    <meta property="og:image:width" content="450"/>
    <meta property="og:image:height" content="298"/>
<?php } else { ?>
    <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
    <meta property="og:description" content="Endeavor lidera el movimiento global que busca impulsar el crecimiento económico sostenible, a través de la selección de Emprendedores de Alto Impacto" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="<?php bloginfo('template_directory'); ?>/template/FotoShare.jpg" /> 
    <meta property="og:image:width" content="450"/>
    <meta property="og:image:height" content="298"/>
<?php } ?>

<title>
	<?php
	// Print the <title> tag based on what is being viewed.
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

	?>
</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>   
    
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/template/favicon.ico" type="image/x-icon" />

<!-- Fancybox -->
<?php include(TEMPLATEPATH . '/fancybox/lib/fancyincludes.php'); ?>

<!-- Nicescroll -->
<script src="<?php bloginfo('template_directory'); ?>/nicescroll/jquery.nicescroll.js"></script>

<!-- Masonry -->
<script src="<?php bloginfo('template_directory'); ?>/isotope/isotope.pkgd.js"></script>

<!-- PARALLAX -->
<script src="<?php bloginfo('template_directory'); ?>/parallax/parallax.js"></script>

<script src="<?php bloginfo('template_directory'); ?>/popup/jquery.modal.min.js"></script>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />


<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/popup/jquery.modal.min.css" type="text/css" />

<script>

	$(window).load(function() {
		<!---- MASONRY --->

		var $container = $('.grid');
		// initialize
		$container.isotope({
			itemSelector: '.grid-item',
 		 	layoutMode: 'fitRows'
		});
		<!---- MASONRY --->
	});



$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.show').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height()+100;

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

            $(this).animate({'opacity':'1'},300);

        }

    }); 

});





$(window).on('load resize', function () {		
		if ($(window).width() >= 1000){	
			$("#menu-top").removeClass();
			$("#menu-top").addClass("desktop");
		}else{
			$("#menu-top").removeClass();
			$("#menu-top").addClass("touch");
			$("#menu-top.touch .menu-item-has-children a").addClass("primer-boton").css('cursor','pointer');
			$("#menu-top.touch .sub-menu a").removeClass();
			$("#menu-top.touch .primer-boton").removeAttr("href");
			$('#menu-top.touch .menu-item-has-children > .sub-menu').parent().click(function() {
			  var submenu = $(this).children('.sub-menu');
			  if ( $(submenu).is(':hidden') ) {
				$(submenu).slideDown(200);
			  } else {
				$(submenu).slideUp(200);
			  }
			});
			
		}

	});


	<!---- NICESCROLL --->
	var nice = false;
	$(document).ready(
	  function() { 
		nice = $("html").niceScroll();
	  }
	);
	<!---- NICESCROLL --->


	<!---- MENU --->
	$(document).ready(function(){
		$("#nav-mobile-hold").click(function(){
			$("#menu-top").slideToggle();
            $("#nav-mobile").toggleClass('active');
		});
		
	});
	<!---- MENU --->
	jQuery(document).ready(function($) {
		$('#post-content a[href$="jpg"], #post-content a[href$="png"], #post-content a[href$="jpeg"]').fancybox();
	});
	
	
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
</head>
<body>
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-45413975-1', 'auto');
  ga('send', 'pageview');

</script>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '570150036476648',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<?php include('includes/preload.php'); ?>


<div id="header">
    
    <div id="menu-top" class="menu-top">
    	<?php wp_nav_menu( array( 'theme_location' => 'menu_sup', 'menu_class' => 'primary', 'fallback_cb' => '') ); ?>
	</div>
    
    
    <div class="barra-menu">
          
        


    	<div id="nav-mobile-hold">
    		<div class="texto">menu</div>
            <div id="nav-mobile">
                <span class="ln-one"></span>
                <span class="ln-two"></span>
                <span class="ln-three"></span>
            </div>
        </div>
        
        <a href="<?php echo get_settings('home'); ?>"><img id="logo-top" src="<?php bloginfo('template_directory'); ?>/template/logo-top.svg"></a>
        <div id="redes-top">
            
            <div id="searchbox" >
            	<form class="search" method="get" action="<?php echo home_url(); ?>" role="search">
                	<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Buscar…', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
                    <button type="submit" role="button" class="btn btn-default right"/><span class="glyphicon glyphicon-search white">></span></button>
              	</form>	
            </div>
 
            <a href="https://www.facebook.com/Endeavor-Chile-343478338971/?fref=ts" target="_blank"><img id="facebook-top" class="boton" src="<?php bloginfo('template_directory'); ?>/template/iconos/facebook-blanco.svg"></a>
 
            <a href="https://twitter.com/endeavorchile" target="_blank"><img id="twitter-top" class="boton" src="<?php bloginfo('template_directory'); ?>/template/iconos/twitter-blanco.svg"></a>
 
            <a href="https://www.youtube.com/user/endeavorCL" target="_blank"><img id="youtube-top" class="boton" src="<?php bloginfo('template_directory'); ?>/template/iconos/youtube-blanco.svg"></a>
            <a href="https://cl.linkedin.com/in/endeavorchile" target="_blank"><img id="linkedin-top" class="boton" src="<?php bloginfo('template_directory'); ?>/template/iconos/linkedin-blanco.svg"></a>
            
        </div>
    
    </div>
    
    <?php include('includes/prox-evento.php'); ?>
    
</div>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>



Link to comment
Share on other sites

You only require one version of jquery to be linked to, also if you mix https with http you will get insecure error, it best to leave https or http out from the link in jquery

 

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 

then it does not matter if webpage is http or https, because link is not specific to either.

Link to comment
Share on other sites

According to console there are errors

 

Specified "type" attribute of "video/mp4; codecs="avc1,mp4a"" is not supported. Load of media resource http://www.endeavor.cl/wp-content/themes/TemaBase/template/video/bg-video.mp4 failed. www.endeavor.cl
TypeError: $(...).fancybox is not a function www.endeavor.cl:70:3
TypeError: $container.isotope is not a function www.endeavor.cl:263:0

Link to comment
Share on other sites

The Problem with wordpress plugins, is if it requires jquery, they install jquery in folder and insert a link to it, so when you have installed numerous plugins you will find you end up with multilple jquery links, with multiple versions, which in turn causes conflicts.

 

You either remove duplicate jquery links, using a plugin which gives you control of links used and where they are placed, or edit functions.php

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...