On our Offices page if you click the dots on the map it opens a div below and changes the sidebar contents. We added a dropdown so you could select cities on mobiles. Since I recreated the website and copied over the code I've done something and it doesn't work anymore.
I know the problem has something to do with this bit of code
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("select option:selected").attr('target');
var value = $("select option:selected").attr('value');
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
Here is the full code
jQuery(function($) {
$(".dot").show();
$('.dot').click(function() {
$(".slidingDiv").slideDown('slow');
});
$('#continent').change(function() {
$(".slidingDiv").slideDown('slow');
});
});
jQuery(function($) {
$('#showSingle').click(function() {
$('.targetDiv').show();
});
$('.dot').click(function() {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
var value = $(this).attr('city');
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#' + value).show();
$('#continent').val(value);
});
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("select option:selected").attr('target');
var value = $("select option:selected").attr('value');
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
});
I'm sure this is something simple for someone who knows Javascript.
Thanks.
There you go:
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("#continent").find(":selected").attr('target');
var value = $("#continent").val();
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
Should work, but it's very ugly code i guess :P
Related
I am not able to create an edit in place feature with JavaScript/ jQuery. I could not use the plugin editinplace, because I need to put a datepicker on it. My code below does not work for some strange reason:
function editImpfDatumImpfung1Clicked(sender)
{
var sText = $(this).text();
var sId = $(this).attr("id");
$(this).attr("id", "tobechanged");
$(this).after('<input type="text" id="' + sId + '" value="' + sText + '" />');
$(this).remove();
bImpfung1Clicked = true;
$("#" + sId).focus();
$("#" + sId).datepicker(datepickerOptions);
if (bFirstRegisterImpfung1 === true)
{
firstRegisterImpfung1();
bFirstRegisterImpfung1 = false;
}
}
$(document).ready(function()
{
$elem = $("span[id^='impfung_1['");
if ($elem.length > 0)
{
bFirstRegisterImpfung1 = true;
$elem.click(editImpfDatumImpfung1Clicked);
}
});
Edit:
No Errors in console.
console.log($("#" + sId).val()); causes undefined
Edit 2:
Just needed to escape the id like this:
sId = sId.replace(/[[]/g,'\\[');
sId = "#" + sId.replace(/]/g,'\\]');
Thanks for your advice.
I imagine you have a typo in the following line:
$elem = $("span[id^='impfung_1['");
try this instead:
$elem = $("span[id^='impfung_1']");
I have the below code.
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
elem = $(this);
part = $(this).attr("data-part-name");
//alert(part);
selected_options = "";
$('.' + part).each(function () {
if ($(this).is(":checked")) {
selected_options += $(this).attr("data-option-name") + ' <b>,</b> '
}
});
$("#part_child_" + elem.attr("data-part-id")).html(selected_options);
});
});
If you see I am adding a "comma" to selected options.
Now problem is it adds comma even after the last element.
How can I remove the last comma
.map() will a perfect fit for this. Also you can filter the checked items using :checked and filter
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var elem = $(this);
var part = $(this).attr("data-part-name");
//alert(part);
var selected_options = $('.' + part).filter(':checked').map(function () {
return '<b>' + $(this).attr("data-option-name") + '</b>'
}).get();
$("#part_child_" + elem.attr("data-part-id")).html(selected_options.join(', '));
});
});
You can use the index of iteration to compare with length of parts element and do the decision whether a comma needs to be added or not.Modify the code to:
var totalparts=$('.' + part).length;
$('.' + part).each(function (i) {
if ($(this).is(":checked")) {
selected_options += $(this).attr("data-option-name") + totalparts!=(i+1) ?' <b>,</b> ':'';
}});
Just remove last , substring from the string,
if(selected_options.length > 0){
selected_options = selected_options.slice(0,-1)
}
$("#part_child_" + elem.attr("data-part-id")).html(selected_options);
replace this line
$("#part_child_" + elem.attr("data-part-id")).html(selected_options.replace(/[\<\>\,b\/\s]+$/,''));
My js onclick event is not working for my portfolio. The page can be seen here: http://www.savantgenius.com/portfolio/branding and this is the script:
<script type="text/javascript">
$(function() {
var portDefault = 'bonya';
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + ' #portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
$('a.focusElement').focus();
});
function get_portfolio(portLocation) {
$('#portItem').fadeOut();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + ' #portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
}
The loading animation appears, but no image. Any thoughts are much appreciated, thanks!
Going off of #Christian Varga's comment, you need to return HTML with the source set as the link you create. Try something like:
$("#portItem").html($("<img>")
.attr("src", 'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent'));
instead of your .load() line.
So I guess your final function should be something like:
function get_portfolio(portLocation) {
$('#portItem').fadeOut();
$('#portLoader').fadeIn();
$("#portItem").html($("<img>")
.attr("src", 'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent'));
// UPDATE:
setTimeout(function () {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
}, 1000);
});
}
Check this solution:
HTML:
<div id="portItem"><img /></div>
JS:
$(function() {
var portDefault = 'bonya';
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem img').attr("src",'http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + '#portLoadedContent');
$('#portItem img').load(function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
});
function get_portfolio(portLocation) {
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem img').attr("src",'http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent');
//check if image is loaded, then hide loader + show image:
$('#portItem img').load(function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
}
See demo : http://jsfiddle.net/esqmr/1/
Try removing the space before #portLoadedContent
<script type="text/javascript">
$(function() {
var portDefault = 'bonya';
$('#portItem').hide();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portDefault + '#portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
$('a.focusElement').focus();
});
function get_portfolio(portLocation) {
$('#portItem').fadeOut();
$('#portLoader').fadeIn();
$('#portItem').load('http://www.savantgenius.com/portfolio/portfolio-item/' + portLocation + '#portLoadedContent', function() {
$('#portLoader').fadeOut();
$('#portItem').fadeIn();
});
}
I'm trying to replace a div based on a class name and a rel attribute.
<script type="text/javascript">
$(function () {
$('.special_button').click(function () {
var num = $(this).attr('rel');
$(button with class .value_button and rel=num).replaceWith("<div class='value_button' >" + $(this).val() + "</div>");
$('div.content_slide').slideUp(600);
});
});
</script>
How would you do this?
Try this:
$(function () {
$('.special_button').click(function () {
var num = $(this).attr('rel');
$('.value_button[rel="' + num + '"]').replaceWith("<div class='value_button' >" + $(this).val() + "</div>");
$('div.content_slide').slideUp(600);
});
});
I need to delete an option from a select in certain circumstances.
Basically:
if(mystatement == true)
{
//remove item with id 'option1' from select of id 'select1'
}
Anyone know the code for me to achieve this?
Many thanks.
Remove by Value:
$("#select1 option[value=1]").remove();
Remove by Text:
$("#select1 option:contains(Text)").remove();
Edit
Since id is unique in the document no need to relate it to the parent select element. You can do simply
$("#option1").remove();
jQuery:
$("#option1").remove();
or
$("#select").remove("#option1");
And the classic javascript method:
var option1 = document.getElementById("option1");
document.getElementById("select1").removeChild(option1);
I have seen many people with this problem. I have created this script that could be useful. Hope you like it:
var robable = {
init: function() {
robable.get_selected_option_from_select();
},
get_selected_option_from_select: function() {
$(".robable").off().on("change", function() {
if ($(this).val() !== "") {
robable.add_to_list($(this));
}
});
},
remove_option_from_select: function(select_id, value) {
$("#" + select_id + " option[value='" + value + "']").remove();
},
add_option_to_select: function(select_id, value, text) {
$('#' + select_id).append('<option value="' + value + '">' + text + '</option>');
},
add_to_list: function(select) {
option_text = $(".robable option[value='" + select.val() + "']").text();
//Add to list
$('#list').append("<li data-value='" + select.val() + "' data-text='" + option_text + "'><a href='#' class='filter-remove' data-parent-id='" + select.attr("id") + "'>Delete</a> " + option_text + "</li>");
robable.remove_from_list();
//Remove from select
robable.remove_option_from_select(select.attr("id"), select.val());
},
remove_from_list: function() {
$(".filter-remove").off().on("click", function() {
var select_id = $(this).data('parent-id');
var option_value = $(this).closest("li").data('value');
var option_text = $(this).closest("li").data('text');
//Add to select
robable.add_option_to_select(select_id, option_value, option_text);
//Remove from list
$(this).closest("li").remove();
});
}
};
robable.init();
<!DOCTYPE html>
<html>
<head>
<title>Select Robables</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<ul id="list"></ul>
</body>
</html>