Parent site breaks design on iframed site - javascript

I just made a leaflet map, designed map popups with bootstrap and when i iframe my map in my wordpress site, the map popup breaks. I figure out its because my Wordpress use a little bit older bootstrap version what conflict some how with my maps design.
I think what breaks the popup design is this element in my wordpress page.php file
<div class="col-lg-8 col-md-12">
Because if I delete it then map works as it should but wordpress page style is broken.
my iframe code:
<iframe src="link to map" width="100%" height="680" frameborder="0"></iframe>
This is the style on popup. Sorry I know its messy because I used it in javascript file. +a[5]+ are javascript array variables.
<div class='cont'>
<div class='row'>
<div class='col-7'>
<div class='text-center'>
<h5 class='card-title text-center'>"+a[2]+"</h5>
<p class='card-text'>"+a[4]+"</p>
</div>
<br />
<div class='adrese'>
<img src='https://cdn3.iconfinder.com/data/icons/map-markers-1/512/residence-512.png' width='20'>
<span class='glyphicon glyphicon-envelope card-text font-weight-bold'>"+a[7]+" &nbsp </span>
<img src='https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-011_calendar-512.png' width='20'>
<span class='glyphicon glyphicon-envelope card-text font-weight-bold'>"+a[8]+"</span>
</div>
</div>
<div class='col-md-5 float-right'>
<div class='atstarpe'>
<a href='./images/"+a[5]+".JPG' target='_blank'>
<img class='d-block ' width='130' height='87' src='./images/"+a[5]+".JPG' alt='Pirmais slaids'>
</a>
</div>
<div class='atstarpe'>
<a href='./images/"+a[6]+".JPG' target='_blank'>
<img class='d-block' width='130' 'height='87' src='./images/"+a[6]+".JPG' alt='Pirmais slaids'>
</a>
</div>
</div>
</div>
</div>
My maps popup (not iframed)
Not iframed map
Maps popup when iframed in Wordpress
Iframed map

Related

Differentiate PDF Downloads in Google Analytics

I am trying to differentiate PDF downloads from PDF opens in a new tab/browser withing Google Analytics or Google Tag Manager
I have two HTMLs
<a href="#" class="resource__link link-download link-file link-file--pdf" rel="noreferrer noopener" target="_blank" download="" modaldialog="[object Object]">
<div class="p-0 resource__border card card-body">
<div class="resource__outer-div ">
<div class="resource__img"><img alt="Product Insert" src="/content/_assets/images/Placeholder/file.png"></div>
<div class="pl-4">
<p class="resource__title card-text">Product Insert</p>
<p class="d-block resource__size card-text">454 KB</p>
</div>
</div>
</div>
<span class="sr-only">This links to a pdf file</span>
</a>
The one above downloads the PDF.
Prescribing Information<span class="sr-only">This links to a pdf file</span>
The one above opens in a new link
I want to add a custom dimension that shows whether the clicks lead to a download or a new tab.
Any ideas?
Thank you

HTML turn a link into a button

<a href="#">
<div class="col-md-4 promo-item item-1">
<h3>
Unleash
</h3>
</div>
</a>
I got a template online, the above (with css/bootstrap?), is an image that is a link. I want to change it so that instead of a link (href), it's a clickable button.
My plan is for the button to use JavaScript to change some of the content on the page, basing it off the JavaScript below;
<button type="button" onclick="document.getElementById('demo').innerHTML='Hello JavaScript!' ">
Click Me!
</button>
So how do I change this href into a button?
in bootstrap you just add the button classes and it will look like a button
<a class='btn btn-default' ...
However, there is no reason you can't just copy the onclick attribute to the anchor tag (or "href" as you keep calling it).
From your code in the comments:
<div id='demo'></div>
<a onclick="document.getElementById('demo').innerHTML='Hello JavaScript!'; return false; "> Click Me!> <div class="col-md-4 promo-item item-1"> <h3> Unleash </h3> </div> </a>

how to create moving div up and down on click

how can i create moving div like on this site (on right side of slider) Click to see div on web with javascript or jquery ?
The vertical carousel on this page (http://jquery.malsup.com/cycle2/demo/carousel.php) might help you out.
You can Google for jQuery carousel and you will find a lot of further tutorials and downloads for this.
<div class="slideshow vertical"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-next="#next3"
data-cycle-prev="#prev3"
data-cycle-pager="#pager3"
data-cycle-carousel-visible=2
data-cycle-carousel-vertical=true
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
...
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class=center>
<a href=# id=prev3><< Prev </a>
<a href=# id=next3> Next >> </a>
</div>
<div class="cycle-pager" id=pager3></div>

How to keep images side by side using bootstrap

My aim is to keep 2 images side by side in large screens and one above another in small screens.The problem what I have done is doing the opposite.In large screens images are coming one above another and in small screens images are coming side by side.
Please see this fiddle.
This is my html code
<!--nav bar-->
<div class="container">
<div class="row">
<div class="col-md-18">
<div >
<img src="http://www.computerhope.com/logo.gif" alt="Logo" class="round"> my user
</div>
</div>
<div class="col-md-6">Recently purchased
<div id="slideshow">
<span class="images">
<div class="box img-responsive">
<img src="http://lorempixel.com/150/100/abstract" />
<span class="caption simple-caption">
<p>Review</p>
</span>
</div>
<div class="box img-responsive">
<img src="http://lorempixel.com/150/100/food" />
<span class="caption simple-caption">
<p>Review</p>
</span></div>
</span>
<a class="next" href="#">Next</a>
</div>
</div>
</div>
</div>
I have not posted the js codes because I feel its not necessary But if you want then please check the fiddle
Please see the screenshot,
Add img-responsive class to image tag and not div tag. Also col-lg-18 not possible to have 18 columns unless you have customised it, by default 12 is the max columns u can have.

capture click of addThis button

I am using the addThis widget to display Facebook, Twitter, Google, Blogger, Wordpress logos on my site.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-1324kj34h243kjh2"></script>
I would like to know of a way that I can capture when someone clicks one of the buttons for Google Analytics tracking reasons. I have attempted to add an onClick to an anchor, but this does not fire - presumably because the markup is re-written by the included JavaScript.
This is my code:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="_gaq.push(['_trackSocial', 'addThis', 'email']);"> </a>
<a class="addthis_button_facebook left" title="Facebook"> </a>
<a class="addthis_button_twitter left last" title="Twitter"> </a>
<a class="addthis_button_google left" title="Google">
<img src="images/google.gif" alt="G" />
</a>
<a class="addthis_button_blogger left" title="Blogger"> </a>
<a class="addthis_button_digg left last" title="Wordpress"> </a>
</div>
</div>
I am using the addthis_config to report GA activity at the moment, but I wish to report to two profiles, so I am looking for a way of capturing the click as that seems like the best way around the problem.
Make sure you have that div appended on the DOM to ensure you could use events. Otherwise check liveQuery.
I haven't used addThis widget but I would try with jQuery using class name:
$.('.addthis_button_email').click(function(){
//Count it...
});
Or using a custom method in every button:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="notifyGA(information....)"> </a>

Categories

Resources