Im working on a wordpress site and I cant figure out the issue with a huge div that will occasionally get inserted into the header.
It seems to be caused by a chat widget called Zopium.
Attached is a screenshot example of what happens.
Link to the site: http://fitness.pixelworklab.com/
This is the code that gets injected:
<div class="fluid-width-video-wrapper" style="padding-top: 100%;">
<embed id="__zopnetworkswf" src="http://cdn.zopim.com/swf/ZClientController2.swf" allowscriptaccess="always" type="application/x-shockwave-flash" style="position: absolute; top: -50px; left: 0px; width: 1px; height: 1px; overflow: hidden;" wmode="opaque"></div>
This is what is seen in the console:
I've experienced some "weird" stuff from times when I called wp_head(); in the template header but forgot to call wp_footer(); at the end of the page.
As the issue didn't happened to #shennan (as he said on comments) and neither to me as we both were not logged into wp-admin, I believe there is a great chance this could be the issue.
So, check your template footer for wp_footer();. If it isn't there, implement it and test the result.
Hope it helps.
Related
How can I unable website preview feature on all of the links in my web page? That is when the user moves the mouse over any link in the page, I want to show a simple pop up window which loads the page in link. I tried doing it on my own with help of Google and stackoverflow. But result got something like this -
(ACTUAL PAGE LINK RENDERING)
How should I fix this? I wanted to have it similar to Google instant preview.
Here is my code - (website links are fetched from web service)
html file
<div class="text-result" *ngIf="Display('all')">
<div *ngFor="let item of items$|async" class="result">
<div class="frame">
<script>
$(".head-link").mouseover(function() {
$(this).children(".tooltip").show();
}).mouseout(function () {
$(this).children(".tooltip").hide();
});
</script>
<div class="title">
<a href="{{item.link}}" class="head-link">{{item.title}}
<iframe id="tooltip" src="{{item.link}}"></iframe>
</a>
</div>
</div>
<div class="link">
<p>{{item.link}}</p>
</div>
<div>
{{item.pubDate|date:'fullDate'}}
</div>
</div>
</div>
css file
.head-link {
color: #069;
cursor: pointer;
}
.tooltip {
display: none;
position: absolute;
border: 1px solid #000;
width: 400px;
height: 400px;
}
I setup a minimal JS fiddle for you, and I believe I resolve the issue.
A summary of my changes is:
Your iframe has an id=tooltip, when you are referencing it as .tooltip, so I changed it to class=tooltip.
Your jQuery script has to appear after the elements on the page that are used by it, so I moved the script tags to the bottom of the class=text-results div.
Two notes:
First, this isn't an Angular 2 problem, you are using Angular 2 in your project, but the problem is with your jQuery code.
Second, you really should avoid using jQuery to solve your problems within an Angular 2 project. Angular 2 has the capability to solve this problem without needing to include jQuery. Mixing jQuery and Angular 2 will result in messy and hard to understand code, you are much better off trying to solve this problem using only Angular 2.
In my project there is a mail sending scenario and it takes too much time to process. so i have added a ajax loading image. Code is given below:
$("#loadingmessage").hide();
$("#submit").click(function () {
$("#loadingmessage").show();
});
And HTML code is:
<div id="abc" >
<div id="loadingmessage" style="z-index: 9999; width: 100px; margin-left: auto; margin-right: auto; margin-top: 28%;">
<img src="~/Images/Bank/ajax-loader.gif"/>
</div>
This code works perfectly when using Mozilla Firfox(version:38.0.5) but not works well when using Google chrome(version 49.0.2623.87 m)
while using chrome, the image only shows just before the process ends, but i need to show the image when user click the 'send' button.
How can i fix this issue?
I am attempting to add parallax scrolling to a page of mine and I am unsure of what I am doing wrong. This is how to set it up:
http://pixelcog.github.io/parallax.js/
I downloaded the library and put it in my file. I then called for it on the page, along with the jquery library. I then did this for my code:
<div class="home-img">
<img src="/images/try.jpg" alt="">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
</div>
.home-img {
/*position: absolute;
max-width: 100%;*/
margin: auto;
width: 100%;
height: auto;
vertical-align: middle;
}
.home-img img {
width: 100%;
position: absolute;
}
.parallax-window {
min-height: 400px;
background: transparent;
}
That is what the instructions are saying to my understanding. However, I tried removing my base img line <img src="/images/try.jpg" alt=""> and when I did that the img went away.
Does anyone have any idea what I am doing wrong?
This can be seen on my site, here:
Click here
You forgot to load the Parallax.js library,
change to line:
<script src="/path/to/parallax.js"></script>
to
<script src="/parallax.js-1.3.1/parallax.js"></script>
now the script will work.
But the "home-img" div will need to look like this:
<div class="home-img">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
This way you will be able to see the effect.
If you will keep the image it will be above the effect.
EDIT
I would recommend you use the browser inspect tools.
This way you can see if all of the javascript loaded currectly.
In your case the console tab in the inspect tool showed the error:
http://optimumwebdesigns.com/path/to/parallax.js Failed to load resource: the server responded with a status of 404 (Not Found)
For chrome use this tutorial:
https://developer.chrome.com/devtools
For firefox use this tutorial:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
I'm very new to javascript but in mid-level with HTML and CSS.
So here is the issue. I just registered a third party contact form service with Foxyform. They provided a code to paste in the page and upload it. It works fine in desktop views, however when one visits the contact page on different mobile or smaller devices it looks out of space and non-responsive. There is no option to edit it in #media screen within the theme.
Is it possible to make this contact form responsive?
Here are the codes:
HTML:
<a id="foxyform_embed_link_602624" href="http://www.foxyform.com/"></a>
Javascript:
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=602624&sec_hash=54f3ab77bfb&width=350px";
s.parentNode.insertBefore(g, s);
}(document, "script"));
Your contactform provider includes an iframe in your page.
An iframe can not be styled by the website on which is it included as most browser handle it as an own webpage which is embedded in another webpage.
Found a fix with CSS (not jquery/javascript sorry) ( for googleCalendar iframe ) but I used the same concept for foxyForms iframe.
via https://thomas.vanhoutte.be/miniblog/make-google-calendar-iframe-responsive/
html
<div class="responsiveCal">
<iframe src="https://calendar.google.com/calendar/embed? showTitle=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&height=600&wkst=2&hl=nl&bgcolor=%23FFFFFF&src=example.be_cpkbjcpttgb5q0%40group.calendar.google.com&color=%23ffcf03&ctz=Europe%2FBrussels" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>
css
.responsiveCal {
position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
}
.responsiveCal iframe {
position: absolute; top:0; left: 0; width: 100%; height: 100%;
}
It allowed me to place a row within the container as well to use bootstraps responsive classes. Hope this is right, I'm still a beginner please feel free to correct any mistakes I made..
Is there a jQuery library or any leads on implementing that photo tagging like in Facebook and Orkut Photo albums?
Thanks
Hmmm, I found that the new version of Img Notes seems to do exactly what you want.
Checkout the Demo. It allows you to easily add tag notes and show them using JQuery. He also depends on the imgAreaSelect jquery plugin for adding notes.
you could try Jcrop or imgAreaSelect.
Not 100% the same behaviour as in Facebook, but with some tweaks, this should e possible.
I didn't find any suitable plugins for this purpose. So I ended up writing myself a small plug-in to mark areas over an image based on the coordinates loaded through an XML file.
The basic code is required is:
<div id="imageholder">
<!-- The main image -->
<img src="<link to image file>" alt="Image">
<!-- The grid tags -->
<div class="gridtag" style="bottom: 100px; left: 106px; height: 41px; width: 41px;"/>
<div class="gridtag" style="bottom: 300px; left: 56px; height: 100px; width: 56px;"/>
<div class="gridtag" ...
</div>
And the basic CSS styling required:
#imageholder{
height:500px;
width:497px;
position:relative;
}
div.gridtag {
border:1px solid #F0F0F0;
display:block;
position:absolute;
z-index:3;
}
In the above the divs with class "gridtags" are added using jQuery through XML or JSON and by binding events on this divs, we can make phototagging similar in Orkut.
PS: This only one side of the phototagging, ie. if we already have the coordinates we can mark on an image and add click events, which is the part actually i wanted. :) You guys has to write code for doing the marking part of the phototagging.
A good and complex example of tag like functionality in facebook is
Talking Pictures, Which is a facebook application.