Last year I published this one page site: www.rofeengenharia.com.br
In the Portifolio page if you click on "Abrir" it loads a dynamic div with javascript over the Portifolio page. In Safari and Firefox it is still working, but it stopped working in Chrome (it was working in Chrome too when I published it).
Here is part of the code:
The place where the dynamic div is loaded and the link to open it (onClick):
<DIV id="projeto_selecionado" style="position:absolute; z-index:20000; background:#ffffff;">
</DIV>
<!-- OBRA 1 -->
<DIV class="view view-sixth">
<IMG width="100%" height="auto" style="float:left;" src="images/portifolio/obra01/obra01_thumb_01.jpg" alt="Obra 01" />
<DIV class="mask">
<H2>Condomínio Jardim Acapulco</H2>
<P>Manutenção executada pela ROFE no litoral sul de São Paulo.</P>
Abrir
</DIV>
</DIV><!-- view -->
And the javascript file:
function exibir_projeto01()
{
$('<div/>').addClass("newdiv")
.html('<DIV id="projeto_selecionado">\
...
...
...
</DIV><!-- container_projeto_01 -->')
.appendTo($("#projeto_selecionado"))
.hide()
.fadeIn(1000);
// Não deixa a pagina voltar para o topo quando clica no link
event.preventDefault();
}
Anyone knows how to make it work in Chrome again?
Try using jQuery - remove the inline onclick and do this instead - also you try to add something with ID #projeto_selecionado to itself
$(".info").on("click",function(e) {
e.preventDefault();
$('<div/>').addClass("newdiv")
.html('<DIV>\
...\
...\
...\
</DIV>')
.appendTo("#projeto_selecionado")
.hide()
.fadeIn(1000);
});
WITHOUT html comments!
Related
I have two functions I want to happen, load iframe only after the clicking (not all iframes, just this one - per click) using the .overlay. There are multiple .overlays and iframes on the page.
I have checked out various sites and these work alone but I can not get both to work together.
overlay:
$(function() {
$("span[rel]").overlay();
});
iframe code option 1:
$(function() {
$('.overhover').click(function(e) {
e.preventDefault();
var iframe = $(this).next();
iframe.attr("src", iframe.attr("data-src"));
});
iframe code option 2:
$(function(){
$(this).find("iframe").prop("src", function(){
return $(this).data("src");
});
});
My Code:
Test
<iframe data-src="http://www.bing.com" src="about:blank">
</iframe>
test
<iframe data-src="http://www.bing.com" src="about:blank">
</iframe>
<!-- Actual code -->
<div class="res-item">
<h4>Header</h4>
<h2>
<!-- Overlay Link -->
<span class="overhover" rel="#tool3">Title
</span>
</h2>
<!-- Overlay Insert -->
<div class="simple_overlay" id="tool3">
<iframe seamless="" data-src="http://www.bing.com" style="width:100%; height:75vh;" frameborder="0">
</iframe>
</div>
</div>
css not included here.
Thanks,
Load iframe:
Load IFRAME onClick
and
Is it possible to not load an iframe in a hidden div, until the div is displayed?
.overlay
http://jquerytools.github.io/demos/overlay/index.html
Based on your "Actual Code", this is what I would do:
EDIT
I've modified the code so it actually does what you want. Also, modified your "original" code slightly for demonstration purposes.
$(function() {
var toolID;
$("span[rel]").on('click', function() {
//so we get the ID of the tool we'll be loading later
toolID = $(this).attr('rel');
}).overlay({
onLoad: function() {
var ifSrc = $(toolID + ' iframe').attr('data-src');
$(toolID + ' iframe').attr('src', ifSrc);
$(toolID + ' iframe').show();
}
});
});
.simple_overlay iframe {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js"></script>
<div class="res-item">
<h1>Header</h1>
<h2>
<!-- Overlay Link -->
<ul>
<li><span class="overhover" rel="#tool3">Bing</span></li>
<li><span class="overhover" rel="#tool4">Duck Duck Go</span></li>
</ul>
</h2>
<!-- Overlay Insert -->
<div class="simple_overlay" id="tool3">
<iframe data-src="https://bing.com" style="width:100%; height:75vh;" frameborder="0"></iframe>
</div>
<div class="simple_overlay" id="tool4">
<iframe data-src="https://duckduckgo.com/" style="width:100%; height:75vh;" frameborder="0"></iframe>
</div>
</div>
You can take it from there, and modify it to suit your needs. Also, notice that bing's protocol is https, not http. If you use the latter, nothing will load in the iframe.
I have the following structure
JAVASCRIPT
//ID of container
$('a#modal_info').attr('rel','{handler: "iframe", size: {x: '+(width-(width*0.03))+', y: '+(height-(height*0.20))+'}}');
});
</script>
HTML
<!-- Esta parte é o Link para fazer a chamada -->
<div id="modal_info" class="modal barradofundo" onclick="window.location.href = this.getElementsByTagName('a')[0].href;">
SAIBA +
</div>
What am I trying to achieve here: The href element that uses the id modal_info is called by the javascript and opens a popup. I can't reproduce it here because it's a Joomla website, but it works. I need to achieve the same result with the div that uses the class barradofundo, as it is already clickable. How is it clickable? Because of the part onclick="window.location.href = this.getElementsByTagName('a')[0].href;"
I'm using wow.js for animations in my website with animate.css but when I test local here works perfectly but when I upload it to my server just not at all...
Here's my link to my website http://eloisemonteiro.hol.es/.
My js to call the wow.js
var wow = new WOW(
{
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: false
}
);
wow.init();
If you check the page 404 you will see that it works in there, here's the code of that one working:
<h1 id="fittext3" class="wow bounceIn">ERROR 404</h1>
And here the other image not working on my index page:
<div class="featurette" id="services">
<img class="featurette-image img-responsive pull-left wow bounceInLeft" src="img/customizacao.png" alt="Customizacao">
<h2 class="featurette-heading">Customização de LMS</h2>
<p class="lead">Customização da sua plataforma baseada na <mark>identidade visual</mark> de cada cliente com <mark>relatórios</mark> de acordo com cada necessidade.</p>
</div>
Needed to call wow in some setTimeout() because of my ajax page.
I want to do that onmouseover change the image and onmouseout it returns the default image. I use this code:
<div class="home-social-share">
<div style="margin-right:15px;width:11px;float:left;">
<a href="javascript:void(0)" onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>','Condividi su Facebook','height=300, width=750,scrollbars=no, resizable=yes')">
<img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshareoff.png" alt="Condividi su Facebook" title="Condividi su Facebook" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshare.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshareoff.png'">
</a>
</div>
<div style="float:left;margin-right:15px;">
<a href="javascript:void(0)" onclick="window.open('http://twitter.com/share?text=<?php the_title(); ?> • Prima Pagina Online&url=<?php the_permalink(); ?>','Condividi su Twitter','height=300, width=500,scrollbars=no, resizable=yes')">
<img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-shareoff.png" alt="Condividi su Twitter" title="Condividi su Twitter" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-share.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-shareoff.png'" />
</a>
</div>
<div style="float:left;">
<a href="<?php the_permalink();?>/#disqus_thread">
<img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil-off.png" alt="Commenta l'articolo" title="Scrivi un commento sull'articolo" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil-off.png'" />
</a>
</div>
Now, it works the onclick functions but the images remains the same, so the onmouseover and onmouseout doesn't work.
Thanks
I'm unsure whether your using Jquery or not, so I'll include examples of both.
<img id="change" src="picture" alt="picture.jpg">
Jquery -
$('#change').on("mouseenter", function() {
$(this).attr('src', 'picture2');
}).on("mouseleave", function() {
$(this).attr('src', 'picture');
});
Javascript -
document.getElementById('change').addEventListener("onmouseover", function() {
this.src = 'picture2';
}).addEventListener("onmouseout", function() {
this.src = 'picture';
});
That should get you going!
Use the onmouseover and onmouseout events because it always works.
Example:
<img src="picture" onmouseover="this.src='picture2'" onmouseout="this.src='picture3'">
Also see http://helplogger.blogspot.be/2012/05/create-rollover-image-effect-change.html
The code from your jsfiddle and the one from your website have some differences.
This code is from your website:
<img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil-off.png?b33912" alt="Commenta l'articolo" title="Scrivi un commento sull'articolo" onmouseover="this.src=" http:="" www.primapaginaonline.it="" wp-content="" themes="" pponline="" images="" pencil.png?b33912""="" onmouseout="this.src=" pencil-off.png?b33912""="">
This is easy to get lost with all this code in a simple tag but if you look closely you will see some of the problems.
First, you have double quotes inside double quotes:
onmouseout="this.src=" pencil-off.png?b33912""=""
And some of these double quotes are not supposed to be there, ex. http:="" in
onmouseover="this.src=" http:="" www.primapaginaonline.it=""
Clean this up and it will works!
I'm trying to use a jQuery UI progressbar that would show in a jQuery UI dialog when I click on an asp:Button.
The Button is declared as follow :
<asp:Button ID="Button2" runat="server" Text="Télécharger"
CausesValidation="False" onclick="Button2_Click" OnClientClick="javascript:displayDialog()"/>
The dialog is declared as follow :
<div id="dialog" title="Attente de téléchargement">
<p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p>
<div id="progressbar"></div>
</div>
And eventually the javascript :
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").hide();
});
function displayDialog() {
$("#dialog").dialog();
$("#progressbar").progressbar({
value: false
});
$("#dialog").show();
}
</script>
This seems to work fine (since Both onclick and OnClientclick function are called). The code behind is executed correctly and the dialog shows too. However the animation of the progress bar doesnt work (see image below).
I don't understand what's going on. I've tried to not use show/hide but the property .css("display","none") and .css("display","block") of the $("#dialog") and the result is the same.
However If I don't hide the dialog on the $(document).ready the animation works fine. When I run this in the script tag:
$(document).ready(function () {
$("#dialog").dialog();
$("#progressbar").progressbar({
value: false
});
});
The dialog shows directly at the loading of the page like this :
which is correct (I obviously don't want it at the start but when you click on the button but still the progressbar shows correctly).
You are finding this issue because you have enclosed your progress bar within the dialog div
ERROR CODE:
<div id="dialog" title="Attente de téléchargement">
<p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p>
<div id="progressbar"></div>
</div>
Applying any changes to the Hidden elements would reflect.so better thing to do is to move the progress bar outside the dialog div.
CORRECTED CODE:
<div id="dialog" title="Attente de téléchargement">
<p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p>
</div>
<div id="progressbar"></div>
Happy Coding :)