I am trying to hide a comment form on my wordpress blog (although the page isn't the wordpress blog, I just get the posts).
If I have comments then the hide/show will work for the form and for the comments. If I have no comments the function doesn't work and i'm not sure why.
If anybody can help I can upload the php files that show the posts (blog.php) and the comments page (comments.php) that is generated within the wordpress theme.
EDIT: PHP code removed as not relevant to error. Relevant HTML code as follows:
...
<body class="home blog logged-in custom-background">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#content img").addClass("imageSeven");
});
</script>
...
<a id="replytitle" href="javascript:togglecommentform('replyform17');">Show Comment Form</a>
<div id="replyform17" style="display:block;">
...
</div>
...
<a id="replytitle" href="javascript:togglecommentform('replyform6');">Show Comment Form</a>
<div id="replyform6" style="display:block;">
...
</div>
...
You have a problem, in that the output (view source) has a reference to jQuery right at the top:
<body class="home blog logged-in custom-background">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#content img").addClass("imageSeven");
});
</script>
Some points on this:
Because you don't include a reference to jQuery anywhere - this will cause an error, meaning that even if the rest of you JavaScript is valid, it will fail to run.
You don't need jQuery(document).ready... if you move all your JavaScript to the bottom of the page (just before the </body> end tag.)
Your main problem seems to be a confused code structure. Based on the messy code you have (no offense), I would recommend using a library like jQuery:
Step 1: Remove all the JavaScript you have in that page.
By the looks of things, that just means the <script> block thats right beneath your <body> tag.
Step 2: Replace these <a> start tags:
<a id="replytitle" href="javascript:togglecommentform('replyform17');">
<a id="replytitle" href="javascript:togglecommentform('replyform6');">
With these:
<a id="replytitle17" href="#">
<a id="replytitle6" href="#">
Step 3: Just before the </body> tag, include the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var images = $('#content img');
if (images.length > 0) { images.addClass("imageSeven"); }
$('#replytitle17').click(function() { $('#replyform17').toggle(); });
$('#replytitle6').click(function() { $('#replyform6').toggle(); });
</script>
This should achieve everything your page has, in jQuery.
Related
I am using Magento 1.7.0.2 version
I want to add 3 jquery divs in my product page in default\template\catalog\product\view.phtml
<script>
$(function() {
$( "#3tabs_product" ).tabs();
});
</script>
<div id="3tabs_product">
<ul>
<li>Product Informatie</li>
<li>Leveringsvoorwaarden</li>
<li>Beoordelingen</li>
</ul>
<div id="tabs-1">Product Informatie.</div>
<div id="tabs-2">Leveringsvoorwaarden</div>
<div id="tabs-3">Beoordelingen</div>
</div>
The problem is that the these 3 tabs in order to run, I have to include
two lines of jquery ui and jquery JUST ABOVE THE CODE ABOVE THEM
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
But this "breaks" my TopMenulinks which are using jquery1.7.1 !
and my add to cart function which is javascript.
If I include the 2 jquery lines the tabs are ok but the dropdown menu and the "add to cart breaks" ....
If I remove the lines the menu is restored and the add to cart works again.
But without including the two lines the 3Tabs are not working!!!
What should I do ???
<script type="text/javascript">
$.noConflict(); //Use no conflict here instead of js file
// Code that uses other library's $ can follow here.
</script>
You may change the order of library file initiating. In page.xml change order as below
jquery.js
noconflict.js
prototype.js This will avoid the error in IE8.
Add this to your html page can solve your issue.
let me know if i can help you more.
You add this line of code $j = jQuery.noConflict() to your query library file and update your code like:
<script type="text/javascript">
$j(function() {
$j( "#3tabs_product" ).tabs();
});
</script>
or You can also use
http://www.magentocommerce.com/magento-connect/magento-easytabs.html this great community module.
I have a multi-page form which works on the principle of loading all of the pages inside the DOM under different DIV id's and as you progress through the form, it simply ads a style="display:none" to the Div's which should not be displayed.
I have a problem where two pages need to have the same content, however as i am using javacript and jquery, i am getting conflicts (as technically, both pages are loaded and the scripts are conflicting).
Can i get a php if Function to say - IF Div id gform_page_2_2 has style="display:none" load (block of html a), and IF Div id gform_page_2_3 has style="display:none" load (block of html b), otherwise load nothing.
How would i go bout doing this?
I'm not quite sure what exactly you are asking but since you have a way to determine when to apply style="display:none" you can use a boolean value display_none=true and use that in your if.
This is a sample code. Here, I have made use of jQuery here. I have included each page's content inside separate DIVs in my index page. Then displayed the content of the page upon clicking the menu in my navbar. I hope this will give you an idea. :)
JScript:
<script type="text/javascript">
$('.nav_button').click(function (){
var page = $(this).text().toLowerCase();
$('#content').html($('#'+page+'_page').html()); //display content of div(that holds the content of the respective page) in the "conetent" div
$('html, body').animate({scrollTop: $("#navbar").offset().top}, 'slow'); //scroll back to the top
return false;
});
</script>
HTML:
<!-- Navigation menu -->
<div id="navbar">
<a class="nav_button" href="#">Home</a>
<a class="nav_button" href="#">About</a>
<a class="nav_button" href="#">Contact</a>
</div>
<div id="content">
<!-- Here page content will be displayed -->
</div>
<!-- This div holds the contents of each page -->
<div style="display:none;">
<!-- Contact Page -->
<div id="contact_page">
You can contact me through this email....
</div>
<!-- About Page -->
<div id="about_page">
About me? I love coding...
</div>
<!-- Home Page -->
<div id="home_page">
Yo! You are at my home page. Check out my whole site and enjoy :)
</div>
</div>
I hope this will help :)
If you want to see it in action, goto: www.magcojennus.co.cc (it's a site that I have created for my college day :) )
I'm attempting to use embedded code from a page within my server, the problem is that when I also try to add URL links to my Facebook below it they're not working?
I'm using this code which was successfully implemented. I'm not sure if the links I'm adding is hidden behind the image, but if it is I'm not sure how to get the link to show on top of the background image.
<body>
<img src="images/background.jpg" alt="" id="background" />
Facebook Link
<div rel="00000000" class="lrdiscoverwidget" data-logo="on" data-background="off" data-share-url="www.domain.com" data-css="">
<script type="text/javascript" src="http://launchrock-ignition.s3.amazonaws.com/ignition.1.1.js"></script>
</div>
<script type="text/javascript">
$(window).load(function() {
$("#background").fullBg();
});
</script>
</body>
Thank you!
For the last few days I am wandering arround the web for a script which would have the elementss I wish for.. The best thusfar is this one http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp, but there are a lot problems, where i need better solution:
I want no hashtags: I want all links for loading pages like folder (www.site.com/first/site/). This works magicaly on github (click here https://github.com/spjoe/deluge-yarss-plugin, and click on a random file and go back while watching adress bar). If someone knew what or how are they doing it would be really cool.
I need dynamic content: The script above only loads "cases" from switch function, while I need the php to check the url and find a file in mysql database and echo out content from desired tables based on the url, if it is found in the db ofcourse (if I point a link to site.com/harvey the php should find Harvey in the db and display for example his phone, adress and other details, while this must not be preloaded but requested only on click due to bandwight issues).
History: I would like to have an option where back and forward movements on the site would work flawlessly and with the animation as it works while clicking links..
Working links inside changable div: Because there is a problem with some scripts which don't change content where the link is inside it (for example first content box includes navigation, which should be replaced with different navigation in the second box), again this work very well with github..
I hope you give me some links or even more help with some code..
I think the script you are looking for is pjax, it has exactly all the features you want. You can find it on github: https://github.com/defunkt/jquery-pjax/tree/heroku
EDIT
You can use it with any server-side language you like. For example,
<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
$('nav a').pjax('#content')
})
</script>
in your website's head,
<nav>
<a href="otherContent1.php" >click me for other content</a>
<a href="otherContent2.php" >click me for even more additional content</a>
</nav>
<section id="content">
<h1>Original Content</h2>
<p>
this will be replaced by pjax with the content's of otherContent1.php or otherContent2.php
</p>
</section>
in your main template and modify your php code so that it looks for the HTTP_X_PJAX header. If it's present (see xhr.setRequestHeader('X-PJAX', 'true')) render only the part that should replace the contents of <section id="content">, else render the whole page. Pjax is then intelligent enough that if it works, it will replace only the contents of <section id="content">, and if it doesn't work, you still have regular links working. pjax will even take care of google analytics, if you're using it, so your tracking is still working.
EDIT2: Example
Ok, here you have a sample php page. be aware that I did not test this, i just wrote it quick and dirty here on stack overflow to show how you could solve this. This code is untested and certainly not production ready. But as an example, you could do something like this (the file should be named index.php):
<?php
$render_template=true;
if ($_SERVER["HTTP_X_PJAX"])
{
$render_template=false;
}
?>
<?php
if ($render_template) {
?>
<html>
<head>
<meta charset="utf-8" />
<title>Testing Pjax</title>
<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
$('nav a').pjax('#content')
})
</script>
</head>
<body>
Date in template: <?php echo $today = date("D M j G:i:s T Y"); ?>
<nav>
<a href="index.php?content=1" >click me for other content</a>
<a href="index.php?content=2" >click me for even more additional content</a>
</nav>
<section id="content">
<?php
}
?>
<?php
if ($_Get["content"]==1)
{
?>
<h1>Content=1</h1>
Date in content: <?php echo $today = date("D M j G:i:s T Y"); ?>
<p>
this will be replaced by pjax with the content's of index.php?content=1 or index.php?content=2
</p>
<?php
} else {
?>
<h1>Content 2=2</h1>
Date in content: <?php echo $today = date("D M j G:i:s T Y"); ?>
<p>
this will be replaced by pjax with the content's of index.php?content=1 or index.php?content=2
</p>
<?php
}
?>
<?php
if ($render_template) {
?>
</section>
</body>
</html>
<?php
}
?>
If you want the URL to display the "Correct" url when you ajax a page request you can use PJAX it changes the history with pushState but it doesn't work on ie6-ie9 check out CanIUse: History for compatibility issues.
I dynamically create multiple tabs using jQUery UI tabs -- the tabs are created using a foreach on a view page as follows (some codeigniter markup):
<script type="text/javascript">
$(function($) {
$('#plants').tabs('paging', { follow: true } );
});
</script>
<div id="plants">
<ul>
<?php foreach ($plants as $row):
echo '<li>'.$row->plant_name.'</li>';
endforeach; ?>
</ul>
<?php if (!empty($plants)):
foreach ($plants as $row): ?>
<div class="block" id="tabs-<?php echo $row->pet_id; ?>">
<div class="grid_6">
<p>
<?php echo '<h1>'.$row->pet_name.'</h1>'; ?>
etc...
</p>
</div>
</div>
<?php
endforeach;
else:
endif; ?>
</div>
As above the tabs are formed fine. Problem is the good ol' Flash Of Unstyled Content. It happens on IE, Chrome, FF.
I've tried the CSS option on the jQuery documentation, didn't work.
There's a simple JS that inserts a CSS style on <head> and then applies a {display:none} on a specific id -- but that makes my panels disappear, waiting for user interaction. I need the first panel to be visible to the user on load, along with the other tabs on the top -- without the darn FOUC.
Does anyone know how to definitely resolve FOUC on jQuery UI tabs? It's really not looking good and I may have to abandon tabs altogether if I can't resolve this.
Any pointers/roadmaps are much appreciated!
Hide the entire page (the <html> element) before the DOM is ready, then once the DOM is ready you make the html element visible again:
$('html').css('visibility','hidden');
$(function() {
$('html').css('visibility','visible');
$('#tabs').tabs();
});
This works because the html element is available by the time this javascript is encountered in the head, before any other DOM elements (like body) are available.
JQuery UI docs suggest:
...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized
Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled:
<div id="example" class="ui-tabs">
...
<div id="a-tab-panel" class="ui-tabs-hide"> </div>
...
</div>
Not sure if you have tried this, or if it is indeed relevant.
I found that firing the tabs() function inside a document ready in the head tag prevented that unstyled flash of tabs for me....
$(document).ready(function() {
//fire off the tabs
$(function() {
$( "#tabs" ).tabs();
});
});
A different approach I used for getting the tabs to show up via ajax, is a ajax request that writes the tabs via jquery.tmpl.