We Keep Coding

Set height and width for popup window in variable (syntax issue probably)

I got the basics of my javascript to function with help I got here on Stackoverflow. I see a bit of room for improvement on what I have now though. A lack of Javascript knowledge keeps me stuck unfortunately.
I'm trying to set arguments such as width, height, toolbar, status for a popup window in a variable. I tried every way I could find both here and via Google to get the syntax right but whatever I try it doesn't seem to work.
See below in Function1 what I ended up with (Function2 still has the hardcoded parameters that I'm trying to put in the variable called windowSpecs).
var windowSpecs = "\'toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745\'";
var function1Name = "test_function_1";
var function1Url = "https://www.google.com";
var function1Class = ".test_function_class1";
var function2Name = "test_function_2";
var function2Url = "https://www.cnn.com";
var function2Class = ".test_function_class2";
// Function 1
window[function1Name] = function () {
window.open(function1Url, windowSpecs,"_blank",);
}
jQuery(function1Class).click(function() {
window[function1Name]();
});
// Function 2
window[function2Name] = function () {
window.open(function2Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}
jQuery(function2Class).click(function() {
window[function2Name]();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Any pointers that could help me figure this out would be greatly appreciated!

Jquery .on event.trigger not refreshed on second click

Hi I'm getting trouble with one strange behavior with this:
I got a link which feeds some data attributes to another link(back link of a slider)
<div class="col-sm-4 etapes etape1 btn-back"
data-classtarget="row_containerHover"
data-currentcontainerid="row_containerHover2"></div>
and the back link code
$('body').on('click touchstart', '.btn-back', function (e) {
//$('.btn-back').on('click touchstart', function (e) {
//console.log('click btn-back');//test ok
//var container = $(e.target).closest('.slide_containerHover');
var container = $("#"+$(e.currentTarget).data('currentcontainerid'));
console.log("current container : "+container.attr("id"));
var container_class_target = $(e.target).data("classtarget");
var prev_container = $("#"+container_class_target);
console.log("prev container : "+prev_container.attr("id"));
//On récup le niveau du container ds l'arborescence
/*var level_container = container.data('level');
var prev_level = parseInt(level_container - 1);*/
//On récup le container précédent
var decalX = parseInt(parseInt($(window).outerWidth() / 2)
+ parseInt(container.outerWidth() / 2));
console.log("ledecalX : "+decalX);//test
container.animate({
left: "+=" + decalX
}, 500, 'easeInOutQuad');
//console.log('row_containerHover outerWidth : '+decalX);//test
setTimeout(function () {
prev_container.animate({
left: "0px"
}, 500, 'easeInOutQuad'), 100
});
}
First time it's ok, my data attributes are correct. When I click another link, the data attributes are changed in my html, but the console test doesn't display the changed values of $(e.currentTarget).data('currentcontainerid')
Is there a way to get the refreshed data attributes of $(e.currentTarget)?
Thanks For all

Finally I've found a way by removing it with the jquery .removeData at the end of procedure :
$(e.currentTarget).removeData('classTarget');
$(e.currentTarget).removeData('currentcontainerid');
Now it works like a charm ^_^ thanks for your Help

You are looking for dataset instead of data(). With dataset you can set and get values dinamically.
How it works?
$(selector).get(0).dataset.currentcontainerid; // returns data-currentcontainerid value
$(selector).get(0).dataset.currentcontainerid = "new value"; // set the new value
I use get(0) to return the DOM object instead the jQuery object. You can make it with pure javascript:
document.getElementById("element").dataset.currentcontainerid = "new value"; // set the new value
More information:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

javascript event running when the mouse is over elements created by another function

This function create_canvas_card() creates a box with smaller boxes in it. How do I get it to call the function card_mouseover() whenever the mouse is over one of the boxes?
function create_canvas_card(card_data, each_card){//where card_data is an element/object and each_card is an int
click_canvas_card_x = 10, click_canvas_card_y = 10;//these are set elsewhere
image_id = $(card_data.node).data('card')
click_canvas_cards[each_card] = click_canvas.rect(click_canvas_card_x, click_canvas_card_y, 40, 40).attr('fill', 'url(/images/thumbnails/image'+ image_id +'.jpg)');
//my attempt
$(card_data.node).bind('mouseover', function(e){
var card = cards[$(this).data('card')];
card_mouseover(card);
});
//another attempt
//click_canvas_cards[each_card].mouseover(click_canvas_card_mouseover(card_data.node));
}
which is called from this loop
for(each_card in cards_to_create_for_click){
var card_data = cards_to_create_for_click[each_card];
create_canvas_card(card_data, each_card);
}
So far neither's worked.

Use Raphael's built in Element.hover() method.
Element.hover
I've made a quick little fiddle to show you it in action here
For your example, I imagine you'd want to change your function to something like this:
function create_canvas_card(card_data, each_card){
click_canvas_card_x = 10, click_canvas_card_y = 10;//these are set elsewhere
image_id = $(card_data.node).data('card')
click_canvas_cards[each_card] = click_canvas.rect(click_canvas_card_x, click_canvas_card_y, 40, 40)
.attr('fill', 'url(/images/thumbnails/image'+ image_id +'.jpg)')
.hover(function(){
//Do something on hover
});

Trying to add a mouseover effect to this Javascript code

Hello am trying to add a mouse over effect to this code but ive been unsuccessful in doing so, Any help would be great... Am not sure if you will need anymore info but if so I can add anything you need
The problem I have is that when I over over the Tab's I can click the text and it highlights it all :( am after the normal mouse over effect if that can be done
Thanks
<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>

To add a mouseover effect in jquery, try it like this:
$('#your id / .your class').bind('mouseover', function() {
alert('hello world');//YOUR CODE HERE
});
I don't see any mouseover events in your code, check the API here:

Paging Through XML Data Using jQuery and HTML

I've got an XML file that contains a list of questions. I'd like to load the first question in the list when an HTML page loads and load the answers as radio buttons. When one of the radio buttons is selected, I'd like to display the results as well as a continue button. The continue button would go to the second element in the XML file.
So, I've got the following thus far:
function generateQuestion(i) {
$(document).ready(function() {
$.get('quiz.xml', function(d) {
alert('Loaded XML');
$(d).find('question').get(0, function() {
alert('Loaded Question');
var $question = $(this);
var questionContent = $question.attr("content");
$(questionContent).appendTo("#quizQuestion");
});
});
});
}
However, the content from the question is never loaded in the element. It looks like it hangs when I go to get the first element in the document. My guess is that there is no overload to inject the object into the function.
Am I correct? Anyone have any quick resources that shows a basic quiz-like example like I'm looking to generate?
UPDATE: I've updated the code to the following and it seems to get caught on the attribute property:
function generateQuestion(i) {
$(document).ready(function() {
$.get('quiz.xml', function(d) {
var $question = $(d).find('question').get(i);
var questionContent = $question.attr('content');
alert(questionContent);
$(questionContent).appendTo("#quizQuestion");
});
});
}
Any ideas?

the get() function returns the non-wrapped set element in this case it would be the xml element.
$.get('quiz.xml', function(d) {
var question = $(d).find('question :eq(0)');
var questionContent = question.attr('content');
alert(questionContent);
$(questionContent).appendTo("#quizQuestion");
});
the other alternative is to re-wrap the object
$.get('quiz.xml', function(d) {
var question = $(d).find('question').get(0);
var questionContent = $(question).attr('content');
alert(questionContent);
$(questionContent).appendTo("#quizQuestion");
});
Also, I'm not sure why your including the $(document).ready inside the function call. When are you calling the function. if its after the document load then you don't really need that.