I'm currently working on a website and it runs correctly in chrome but for some reason IE8 does not want to run any of the javascript/jquery scripts. Even when I call for an alert on page ready, it does not pop up. It is a little sloppy; I've included all of the css and jquery in the actual index.php file and was planning on cleaning it up eventually after I was a little farther along, but enough of my terrible excuses. I've read that a trailing comma after an item can make a website not function correctly in IE, but I cannot find one in my code. I am still learning so I am sure there are many things that could be corrected in my code as well. Sorry for how long it is. Essentially what happens is that all of the hidden divs just hang out and lay overtop one another, and none of the code executes.
<script type="text/javascript">
function video_pop(vimeo_link) {
var vimeo_applet = "";
$('.prompt_inner').text(vimeo_applet);
vimeo_applet = "<div>";
vimeo_applet += "<iframe src=\""+vimeo_link+"\" id=\"vimeo_link\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>";
vimeo_applet += "</div>";
$('.prompt_inner').append(vimeo_applet);
$('.prompt_box').css("margin-left", (-(($('.prompt_inner').width())/2)));
$('.prompt_box').css("visibility", "visible");
$('.prompt_background').css("visibility", "visible");
$('.prompt_box').animate({
opacity: '1'
}, 500);
$('.prompt_background').animate({
opacity: '.95'
}, 500);
}
//MAIN MENU FUNCTIONS
function directors() {
$('.menu').stop().fadeOut(1000).hide();
$('#directors').stop().fadeIn(1000);
$('#col_work').stop().fadeOut(1000).hide();
$('#slideshow_container').stop().fadeIn(1000);
}
function contact() {
$('.menu').stop().fadeOut(1000).hide();
$('#main_contact').stop().fadeIn(1000);
$('#col_work').stop().fadeOut(1000).hide();
$('#slideshow_container').stop().fadeIn(1000);
}
function login() {
$('.menu').stop().fadeOut(1000).hide();
$('#login').stop().fadeIn(1000);
$('#col_work').stop().fadeOut(1000).hide();
$('#slideshow_container').stop().fadeIn(1000);
}
function work() {
$('.menu').stop().fadeOut(1000).hide();
clearInterval(slideshow_int);
$('#slideshow_container').stop().fadeOut(1000).hide();
$('#col_work').stop().fadeIn(1000);
}
function showmenu() {
$('#back_button').stop().fadeOut(1000).hide();
$('#director_set').stop().fadeOut(1000).hide();
$('#holness').stop().hide();
$('#pryce').stop().hide();
$('#ntiri').stop().hide();
$('#quiroz').stop().hide();
$('#col_work').stop().hide();
$('#main_menu').stop().fadeIn(1000);
start_slideshow();
$('#slideshow_container').stop().fadeIn(1000);
}
//DIRECTOR FILES
function director(x) {
$('.menu').stop().fadeOut(1000);
$('#main_menu').stop().fadeOut(1000);
$('#col_work').stop().fadeOut(1000).hide();
clearInterval(slideshow_int);
$('#slideshow_container').stop().fadeOut(1000);
$('#back_button').stop().fadeIn(1000);
$('#director_set').stop().fadeIn(1000);
if (x==="1") {
$('#holness').stop().fadeIn(1000);
}
else if (x==="2") {
$('#pryce').stop().fadeIn(1000);
}
else if (x==="3") {
$('#ntiri').stop().fadeIn(1000);
}
else if (x==="4") {
$('#quiroz').stop().fadeIn(1000);
}
}
function start_slideshow() {
slideshow_int = setInterval(function() {
$('#slides > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slides');
}, 5000);
}
$(document).ready(function() {
//HIDE MENUS
$('.menu').hide();
$('#director_set').hide();
$('#back_button').hide();
$('#holness').stop().hide();
$('#pryce').stop().hide();
$('#ntiri').stop().hide();
$('#quiroz').stop().hide();
$('#col_work').stop().hide();
video_pop("<?php
$query = "SELECT * FROM global WHERE id=1";
$queryobj = mysql_query($query);
$result = mysql_fetch_array($queryobj);
echo $result['ovideo'] ?>");
$('.prompt_background').click(function() {
$('.prompt_box').animate({
opacity: '0'
}, 500, function() {
$('.prompt_box').css("visibility", "hidden");
});
$(this).animate({
opacity: '0'
}, 500, function() {
$(this).css("visibility", "hidden");
var vimeo_applet = "";
$('.prompt_inner').text(vimeo_applet);
});
});
//SLIDESHOW CONTROL
$('#slides > div:gt(0)').hide();
start_slideshow();
//WORK MOUSEOVER
<?php
$queryobj = mysql_query("SELECT * FROM global_thumbnails");
$total_global_thumbs = mysql_num_rows($queryobj);
for ($i=1; $i<=$total_global_thumbs; $i++) {
$queryobj = mysql_query("SELECT * FROM global_thumbnails WHERE position = {$i}");
$result = mysql_fetch_array($queryobj);
$global_still_title = strtoupper($result['title']);
echo "$('#global_stills img:eq(".($i-1).")').mouseover(function() {
$('#global_titles').text(\"{$global_still_title}\");
});
";
}
?>
$('#global_stills img').mouseout(function() {
$('#global_titles').text("");
});
});
</script>
i think instead of this
for ($i=1; $i<=$total_global_thumbs; $i++)
try this
for (var i=1; i<=$total_global_thumbs; i++)
Because Without "var" declarations it won't work in IE8 .
once i also faced the same problem. so after i did this it works for me :)
Try to put all the jQuery between $(document).ready(function() { ... });
Related
I have a jQuery code that brings all the attributes from one side of a panel to another. This button works as an "Add All". The following code makes that happen.
So far I've done some modification in order to suit my purpose. The following code that I tried still works as an "Add All"
It keeps bringing me all the values from one table to another instead those where industry = auto.
This is the original "Add All" Code.
this.container.find(".add-all").click(function() {
var options = that.element.find('option').not(":selected");
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i) {
if (jQuery(this).is(":visible")) jQuery(options[i-1]).attr('selected', 'selected');
});
} else {
options.attr('selected', 'selected');
}
that._populateLists(that.element.find('option'));
return false;
});
This is what I've tried so far...
this.container.find(".add-auto").click(function() {
var options = that.element.find('option').not(":selected");
var elements = $('li').find("[industry]")
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i) {
if (jQuery(this).is(":visible") && jQuery(this).find("[industry = 'auto']")) jQuery(options[i-1]).attr('selected', 'selected');
});
} else {
that.availableList.children('li').each(function (i) {
if (jQuery(this).find("[industry = 'auto']")) jQuery(options[i-1]).attr('selected','selected');
});
}
that._populateLists(that.element.find('option'));
return false;
});
Without better context, it's hard to know what is not working for you. The only thing I can see as an issue is confusing this in your .each().
Consider the following:
this.container.find(".add-auto").click(function() {
var options = that.element.find('option').not(":selected");
var elements = $('li').find("[industry]")
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i, el) {
if (jQuery(el).is(":visible") && jQuery(el).find("[industry='auto']")){
jQuery(options[i-1]).attr('selected', 'selected');
}
});
} else {
that.availableList.children('li').each(function (i, el) {
if (jQuery(el).find("[industry='auto']")){
jQuery(options[i-1]).attr('selected','selected');
}
});
}
that._populateLists(that.element.find('option'));
return false;
});
If we pass in the Index (i) and the Element (el), we can ensure there is no conflict of this.
Hope that helps.
I'm using bootstrap for website. I include Ajax, css and PHP to show Auto Suggestions for mp3 search. Everything is working fine but an issue happened. I tried with different way but the issue is still there.
The Issue
When type keyword it show suggestion. (OK)
When you click on keyword from suggestion it works. (OK)
But when we erase keyword and click on anywhere at page then page content reload and shown as u can see in picture.
Url of website is http://www.4songs.pk
Code in header
<script src="http://www.4songs.pk/js/jquery-1.10.2.js"></script>
<script>
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>
<script type="text/javascript">
var myAjax = ajax();
function ajax() {
var ajax = null;
if (window.XMLHttpRequest) {
try {
ajax = new XMLHttpRequest();
}
catch(e) {}
}
else if (window.ActiveXObject) {
try {
ajax = new ActiveXObject("Msxm12.XMLHTTP");
}
catch (e){
try{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
return ajax;
}
function request(str) {
//Don't forget to modify the path according to your theme
myAjax.open("POST", "/suggestions", true);
myAjax.onreadystatechange = result;
myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myAjax.setRequestHeader("Content-length", str .length);
myAjax.setRequestHeader("Connection", "close");
myAjax.send("search="+str);
}
function result() {
if (myAjax.readyState == 4) {
var liste = myAjax.responseText;
var cible = document.getElementById('tag_update').innerHTML = liste;
document.getElementById('tag_update').style.display = "block";
}
}
function selected(choice){
var cible = document.getElementById('s');
cible.value = choice;
document.getElementById('tag_update').style.display = "none";
}
</script>
The 2nd issue
When auto suggestions load it also include some empty tags as you can see in picture
I take this picture as doing Inspect Elements
PHP Code are clean
<?php
include('config.php');
if(isset($_POST['search']))
{
$q = $_POST['search'];
$sql_res=mysql_query("SELECT * FROM dump_songs WHERE (song_name LIKE '%$q%') OR (CONCAT(song_name) LIKE '%$q%') LIMIT 10");
while($row=mysql_fetch_array($sql_res))
{?>
<li><a href="javascript:void(0);" onclick="selected(this.innerHTML);"><?=$row['song_name'];?></li>
<?php
}
}?>
In the function request(str) put an if statement to check if str length is greater than zero.
function request(str) {
if(str.length > 0)
{
// Your existing code
}
else
{
document.getElementById('tag_update').innerHTML = '';
}
}
In short words the problem you are describing is happping because the str parameter in the data that you send to /suggestions is empty. The server returns 304 error which causes a redirect to the root page. Your js script places the returned html into the suggestion container. And thats why you are seeing this strange view.
-UPDATE 1-
Added the following code after user request in comments
else
{
document.getElementById('tag_update').innerHTML = '';
}
-UPDATE 2- (16/07/2014)
In order to handle the second issue (after the user updated his question)
Υou forgot to close the a tag in this line of code
<li><a href="javascript:void(0);" onclick="selected(this.innerHTML);"><?=$row['song_name'];?></li>
<?php echo auto_link(site_url('guest/view/quote/' . $quote->quote_url_key)); ?>
This is creating for instance the following link:
http://domainname.com/guest/view/quote/d163df9c4d426b3ab5ef6247bc380745
How can I add an target="_blank" to this php code. Or is there another way to achieve the same.
EDIT 1: Added all scripts from the php page.
<script type="text/javascript">
$(function() {
$('#btn_add_item_from_lookup').click(function() {
$('#modal-placeholder').load("<?php echo site_url('item_lookups/ajax/modal_item_lookups'); ?>/" + Math.floor(Math.random()*1000));
});
$('#btn_add_item').click(function() {
$('#new_item').clone().appendTo('#item_table').removeAttr('id').addClass('item').show();
});
<?php if (!$items) { ?>
$('#new_item').clone().appendTo('#item_table').removeAttr('id').addClass('item').show();
<?php } ?>
$('#btn_save_quote').click(function() {
var items = [];
var item_order = 1;
$('table tr.item').each(function() {
var row = {};
$(this).find('input,select,textarea').each(function() {
if ($(this).is(':checkbox')) {
row[$(this).attr('name')] = $(this).is(':checked');
} else {
row[$(this).attr('name')] = $(this).val();
}
});
row['item_order'] = item_order;
item_order++;
items.push(row);
});
$.post("<?php echo site_url('quotes/ajax/save'); ?>", {
quote_id: <?php echo $quote_id; ?>,
quote_number: $('#quote_number').val(),
quote_date_created: $('#quote_date_created').val(),
quote_date_expires: $('#quote_date_expires').val(),
quote_status_id: $('#quote_status_id').val(),
items: JSON.stringify(items),
custom: $('input[name^=custom]').serializeArray()
},
function(data) {
var response = JSON.parse(data);
if (response.success == '1') {
window.location = "<?php echo site_url('quotes/view'); ?>/" + <?php echo $quote_id; ?>;
}
else {
$('.control-group').removeClass('error');
for (var key in response.validation_errors) {
$('#' + key).parent().parent().addClass('error');
}
}
});
});
$('#btn_generate_pdf').click(function() {
window.location = '<?php echo site_url('quotes/generate_pdf/' . $quote_id); ?>';
});
var fixHelper = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
};
$("#item_table tbody").sortable({
helper: fixHelper
});
});
</script>
I have resolved it. Not by using any code but by simple explaining to the users to use ctrl + click. It is probably not the best thing. There should be a way to achieve the same with code. But after the long discussion with Royal Bg I thought it would be wise to stop putting oil on the fire.
I hope that in the future someone else takes up the original question and posts an solution for others to benefit from. In the meantime I will accept this as an answer. I hope others do too.
So I have a counter which counts down to 0 so when it hits 0 I want it to do a pdo update. The problem is that the if statement lets the update happen on each page refresh and does not wait for the count to hit 0.
I have looked at the code and can not see where I am going wrong.
<?php $timer = '20'; ?>
window.onload = function(){
(function(){
var counter = <?php echo $timer ; ?>;
setInterval(function() {
counter--;
if (counter >= 0) {
span = document.getElementById("count");
span.innerHTML = counter;
}
// Display 'counter' wherever you want to display it.
if (counter === 0) {
document.getElementById( "response" ).innerHTML = "<div style=\"float: right; display: inline-block; margin: 6px;\"><div class=\"skip_btn\">
<?php
$sqll = "UPDATE users SET coins=coins+? WHERE username=?";
$q = $db->prepare($sqll);
$q->execute(array('1',$_SESSION['username']));
$sqll2 = "UPDATE websites SET clicks_left=clicks_left-? WHERE id=?";
$q2 = $db->prepare($sqll2);
$q2->execute(array('1',$row['id']));
?>
</div></div><div style=\"clear:both;\"></div>";
}
}, 1000);
})();
}
I have just fixed it buy using a parser
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Check if the page has loaded completely
$(document).ready( function() {
setTimeout( function() {
$('#some_id').load('parser.php');
}, 10000);
});
</script>
Thanks for the warm welcome tot he site tho.
Using jQuery try the following:
$(document).ready(function() {
var counter = 20;
setInterval(function() {
if( counter == 0 ) {
$.post("url/to/php");
}
else {
$("#div_for_showing_counter").html(counter);
counter--;
}
}, 1000);
});
This way you separate client side from server side. You can do whatever you want in the php file. If you need a callback or you need to pass data to the php file then simply modify the $.post to something like this:
$.post("url/to/php", { "key1": "value1", "key2": "value2" }, function(data) {
alert(data);
});
I use jQuery (I found this code in an answer, tested and working) to show people.php and reload it every 100 seconds. People.php has an array peoples where there are saved name, job, birthday.
As you can see, the output stops at 30 names. How can I have a twitter like button "load more" and show 10 more at a time? Additionally, when there are e.g. 50 more people's name (assuming that the user clicked "load more" twice, will the jQuery timeout reload, returned them at 30 as the beginning ?
<script>
var timerID;
$(function () {
function loadfeed() {
$('#feed')
.addClass('loading')
.load('people.php', function () {
$(this).removeClass('loading');
timerID = setTimeout(loadfeed, 100000);
});
}
loadfeed();
});
</script>
How about passing a parameter to the URL in your load(..) call?
$(function () {
var startAt = 0;
function loadfeed() {
$('#feed')
.addClass('loading')
.load('people.php?start_at=' + startAt, function () {
$(this).removeClass('loading');
timerID = setTimeout(loadfeed, 100000);
startAt += 30;
});
}
});
Then in people.php you could get the passed parameter using $_GET:
$start_at = 0;
if (isset($_GET['start_at']) && is_numeric($_GET['start_at'])) {
$start_at = (int) $_GET['start_at'];
}
for ($i = $start_at; $i < min($start_at + 30, sizeof($peoples)); $i++) {
echo $peoples[$i]->name;
}
Well what you could do is save a variable that contains the number of people, this example should give you a good view of what i mean.
<script>
var timerID;
var cap;
$(function () {
function loadfeed() {
$('#feed')
.addClass('loading')
.load('people.php?cap='+cap, function () {
$(this).removeClass('loading');
timerID = setTimeout(loadfeed, 100000);
});
}
loadfeed();
});
</script>
<?php
foreach ($peoples as $people) {
if(++$i > $_GET['cap']) break;
echo $people->name;
}
?>
So all you have to do, is change the cap variable, you could do this easily making a javascript function and call this via a onClick event.