I'm developing a comment system using jquery. Actually i'm stuck at the portion of displaying the portion, which displays the form at particular index. Suppose that i've 5 links. If i click on the 4th link, the form should be displayed at the 4th link position. But whenever i click on any of the link position, the form is getting displayed at the first link position. This should display as we see in a commenting system. I don't know if have to get some row position or something like that. A sample code from the jsfiddle has been posted below. If i have 3 links, whenever i click on any link, the form will be displayed at first link. I would like to fix this issue. Please help. Thank You
Here's the jsfiddle link
"http://jsfiddle.net/5UMe9/1/"
(function($) {
$.fn.commentSystem = function() {
//var settings = $.extend({index:ind});
//if(settings.index)
$(this).show();
}
}(jQuery));
$(document).ready( function() {
hideForm();
createLink();
onLinkClick();
});
One way to accomplish your goal is to append the form to the div element that has the currently clicked link. In that case, you could pass in the clicked element, and append your form inside the commentSystem method.
Here's a jsfiddle: http://jsfiddle.net/ZDgx6/1/
JS:
(function($) {
$.fn.commentSystem = function(link) {
$(this).insertAfter(link).show();
}
}(jQuery));
.
.
.
$(".link").click(function(e){
$(".Form").commentSystem(e.currentTarget);
});
Related
I make verification page that have a button verify, when click that button will be show image "Yes/tick" mark on other page. Verification rules : when meet the condition which is if have selected 3 checkbox, the verification is accepted, user will click button verify, and image yes mark will be showing in other page (the main page)
I've tried to send image to main page but just only showing image in current page and showing all div main page, not only image that I need. The checkbox rules already working with some show alert function
This is for the verification rules checkbox :
function check(){
var checked=0;
$( "input:checkbox" ).each(function() {
if($(this).is(':checked')){
checked++;
}
});
if(checked>2){
alert('Ok!');
}
else{
alert('At least 3 checkboxes need to be selected!');
}
}
and the function for image that I'm trying :
function getImage(){
localStorage.setItem('/biz/eKYC/EK01.html','../../sampleData/dummyImages/verifOK.jpeg');
}
var image = "../../sampleData/dummyImages/verifOK.jpeg";
//location.href = '/biz/eKYC/EK01.html';
//var page = '/biz/eKYC/EK01.html';
function toggle_visibility(id) {
$(".verif").click(function(){
$(location).attr('href',image);
$("#image").show();
$("#custInfo").hide();
return getImage()
});
}
// // document.getElementById('imgVerifOK').src = icon.replace('30x30', '125x125');
// // document.getElementById('imgVerifOK').style.display='block';
I expect just image that showing but it shows all div in main page
It's a little difficult to tell exactly what you're asking, or even what the intended code is supposed to accomplish, but in looking at your toggle_visibility function this line seems suspect:
$(location).attr('href',image)
This will change the URL of the page to be the URL of your verification image, and you do it whenever a user clicks on any element with the class verif. If that's actually what you intended you need to explain better about the structure of the DOM of your page (is every one of these images in an iframe?) and maybe show how things are going wrong.
im working on a site and I created my own menu for the website.
So the menu is hidden away in 0 opacity and z-index -1.
on button click the menu will show at the screen.
https://williamhrtanto.com/msa/about/ this is the site im working on so you guys can check directly how it currently works
the current problem is that whenever I click on the button to show the menu, it will go back to the top of the page
Im asking on how to wherever i click the menu will show up and wont move back to top of the page.
I've tried with fixed position and absolute position
thankyou
You have this JS code on your page:
<script>
jQuery(document).ready(function($){
// now you can use jQuery code here with $ shortcut formatting
// this will execute after the document is fully loaded
// anything that interacts with your html should go here
var buttonMenu = $('#menuButtonContainer');
var menuScreen = $('#menue');
buttonMenu.click(function(){
//alert('clicked');
if(menuScreen.css('opacity')=='0'){
menuScreen.css('opacity', '1');
menuScreen.css('z-index', '999');
}
else {
menuScreen.css('opacity','0');
menuScreen.css('z-index','-1');
}
});
});
</script>
in this place:
buttonMenu.click(function(){
//alert('clicked');
change to
buttonMenu.click(function(e){
e.preventDefault();
//alert('clicked');
note the e added as function argument and the new line e.preventDefault();
Remove opacity
Set display : none, position : fixed
After click set display block
You need to cancel the default event of the anchor tag.
Use this
$("#buttonMenue").click(function(evt) {
evt.preventDefault();
});
I have two pages, Page 1 and Page 2.
Page 2 has several buttons on it that call a JavaScript function, displaying text (I don't think that code is relevant for this, so I'll omit).
What I need is to create links on Page 1 that link to Page 2 and click appropriate buttons.
If a user clicks on LINK1 on Page 1, she should go to Page 2 and trigger a click of a certain button there.
Is something like this possible?
Thanks a lot!
You can do something like (not tested):
Page 1:
<a href="page2.html?action=triggerClick"/>Link</a>
Page 2:
window.onload = function() {
var url = new URL(window.location.href);
var action = url.searchParams.get('action');
if (action == 'triggerClick') {
document.getElementById('buttonId').click();
}
}
On page two, you can add this to the start of the script:
JQuery:
$(document).ready(function(){
$(#div).show();
});
Or in vanilla:
window.onload = function() {
document.getElementById("div").display = "block";
};
The thing is, if I understand correctly what you asked, you don't need to trigger the button, you can just show the div. This might bring some problems, if you want the button to now hide the div. But you can add a simple function that just changes from hide to show, and from show to hide.
Hope it helps.
I figured it out. On the first page I use links like this:
<a href="page2.html?firstButton">First Link<a>
The script on the second page:
var clickTrigger = window.location.search.substring(1);
window.onload = function() {
document.getElementById(clickTrigger).click();
}
The buttons on the second page all have IDs that correspond to the clickTriggers I'm using in the links on the first page.
Thanks, everyone!!
I have a wordpress site.
I add custom thumbnails in product section, it shows vertically. I just add the jquery code following:
$(document).ready(function(){
$('.active-thumb-link a').click(function(e){
e.preventDefault();
var imgSrc = $(this).attr('href');
var imgFind = $(".flickity-slider > div > a ").each(function(){
if($(this).attr('href') == imgSrc){
$(this).closest('div').css({"position": "absolute", "left": "0%"});
}
});
});
Code Motive: When user click on thumbnail image =, this fucntion get the "href" attribute of the clicked image. This "href" and image src is same that i want to display in product image div. i also add some css in jquery code for display the image. Everything is working fine.
Issue is: Suppose 4 thumbnails appearing as ascending order like"
THUNMB1
THUNMB2
THUNMB3
THUNMB4
When i click first time thumb1,thumb2,thumb3,thumb4 it works,
But when click like this order
1.) Click thumb1 works good
2.) Click thumb2 works good
3.) Click thumb3 works good
4.) **Click thumb2 Not works after that nothing works when i click on previously clicked thumbnail again. This is the main issue**
Thanks! Plz help me
You need to reset the images that are not being clicked back to their normal position. Inside your if-statement you could set all images to whatever first position they initially have, and then change the position of the closest one, like your already doing.
I'm using WordPress Liveblog and a not-yet merged pull-request so will reference the code directly on the GitHub repo to hopefully explain my question better. Please see here for a working example of the plugin code in action.
The WordPress comment form is shown when I click on the Reply button. Before clicking the button, the form is hidden from view.
The comments are shown when I click on the second reply button > Reply
My aim is to replace both buttons with one single button called Toggle. When clicked, I'd like both the WordPress comment form AND the comments to be displayed.
So far I have done the following...
My Toggle button:
<a class="toggle" href="#">Toggle</a>
My script (modified from here):
jQuery('a.toggle').click(function () {
var openImgUrl = 'open.png',
closeImgUrl = 'close.png';
var $newsItem = jQuery(this).closest('.news-text'),
$newsContent = $newsItem.find('.news-content'),
isContentVisible = ($newsContent.is(':visible'));
// slide up all shown news-items - but its expected that only one is visible at a time
jQuery('.news-text').find('.news-content').slideUp(function () {
// on animation callback change the img
jQuery('.news-text').find('.toggle > img').attr('src', openImgUrl);
});
if (!isContentVisible) { // if the new-item was hidden when clicked, then show it!
$newsContent.slideDown(function () {
// on animation callback change the img
$newsItem.find('.toggle > img').attr('src', closeImgUrl);
});
}
return false; // stop postback
});
Using my script and toggle button, when the Toggle button is clicked, comments are displayed under each entry. When the toggle button is clicked again, the comments are hidden. However, this doesn't take the WordPress comment form into account.
How can I get the WordPress comment form to display along with the comments when the Toggle button is clicked?
Liveblog Glossary:
Entry: An entry is a top-level comment just like a standard 'comment' made in WordPress.
Comment: Comments can be made on entries.
I found comment_reply_link to be the answer!
http://codex.wordpress.org/Function_Reference/comment_reply_link
Using this function to output the reply link enabled me to do what I needed. I just had to change my selector in my script to use the comment reply button as the toggle and remove the original toggle button I had set up. For example:
jQuery('a.comment-reply-link').click(function () {