Jump to content
harry_ord

Popup in Wordpress site

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>



Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Can't i just ignore those error? i'm not trying to load those stuff, i don't care. Does it affect what i'm trying to do? Also that video i see it loading.

Edited by harry_ord

Share this post


Link to post
Share on other sites

Na! I just like informing you of errors just to annoy you, then let you waste hours trying to fix your current problem, then you realise if there were no errors your actual problem goes away.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...