i think i am not going about this quite right, being very new to jquery.
i have a page with 3 recipes on it hidden. when a link to recipe A is clicked it opens in a modal. i want to be able to print just the content of the recipe. so i am opening a new window (nonmodal) and trying to write the recipe to it (depending on which recipe is chosen)
this is the code i am using
$('a.new-window').click(function(){
var recipe = window.open('','RecipeWindow','width=600,height=600');
$('#recipe1').clone().appendTo('#myprintrecipe');
var html = "<html><head><title>Print Your Recipe</title></head><body><div id="myprintrecipe"></div></body></html>";
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
but it returns an error. i think it is close but not quite right. the error is:
missing ; before statement
[Break on this error] var html = "Print...="myprintrecipe">";\n
I think what you are looking for is the following:
jQuery(function($) {
$('a.new-window').click(function(){
var recipe = window.open('','RecipeWindow','width=600,height=600');
var html = '<html><head><title>Print Your Recipe</title></head><body><div id="myprintrecipe">' + $('<div />').append($('#recipe1').clone()).html() + '</div></body></html>';
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
});
Marius had a partially correct answer - you did have a javascript error in your html string, but the content wouldn't have been appended anyways even if the error didn't get thrown because you were trying to append the recipe before the #myprintrecipe div was even in the new window.
Hope this helps.
The problem is in your string. Change it to this:
$('a.new-window').click(function(){
var recipe = window.open('','RecipeWindow','width=600,height=600');
$('#recipe1').clone().appendTo('#myprintrecipe');
var html = "<html><head><title>Print Your Recipe</title></head><body><div id=\"myprintrecipe\"></div></body></html>";
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
The problem is that you had a " character inside the string, which ends the string. The script engine got confused and complained with the error message.
change :
var html = "<html><head><title>Print Your Recipe</title></head><body><div id="myprintrecipe"></div></body></html>";
to:
var html = "<html><head><title>Print Your Recipe</title></head><body><div id='myprintrecipe'></div></body></html>";
and take notes on the double quotes (")
Related
I'm a beginner.
I encounter a small problem which is I cannot add an image to my div block.
here is my HTML code
<span class = 'memepic'>
<img src ="https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTmvCGIVavqB6jVObiS1sqkvwlzYgpjCVfWBg&usqp=CAU">
</span>
and I wrote my js code is like this one
//it is my <span> id
const img = document.getElementsByClassName('memepic')
//it is my divblock id
const memebox = document.querySelector('#meme')
for(i of img){
i.addEventListener("click", function(e) {
console.log(e)
memebox.style.backgroundImage = 'url("e.path[0].currentSrc")';
});
}
the error shows my console is
e.path[0].currentSrc:1 GET file:///C:/Users/kevin/Desktop/bootcamp/officialclass/meme%20generator/e.path[0].currentSrc net::ERR_FILE_NOT_FOUND
my purpose is when I click that picture, that picture will show on my divblock which is in the center of the screen.
I checked the path[0].currentSrc is correct.
and it will show the picture if I replace 'e.path[0].currentSrc' to the content inside the 'e.path[0].currentSrc'.
like this
memebox.style.backgroundImage = 'url("https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTmvCGIVavqB6jVObiS1sqkvwlzYgpjCVfWBg&usqp=CAU");
Hey can you try this code in for loop :
`url(${e.srcElement.currentSrc})`
Javascript doesn't parse variables that are inside a string, so you're asking for the background URL to literally be set as "e.path[0].currentSrc".
Instead of this:
memebox.style.backgroundImage = 'url("e.path[0].currentSrc")';
Do this:
memebox.style.backgroundImage = 'url("' + e.path[0].currentSrc + '")';
My Code:
$('.classname').on ("click" ,function() {
var newpage = "Html Elements for blank page";
var mywindows = window.open("","_blank","");
mywindows.document.open() ;
mywindows.document(newpage);
mywindows.document.close() ;
});
<button class="classname">Click here</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I want to make it short By Using:
$('html').html('my html elements');
but I can't success to use this, It Always shows result in the current page, and opens a blank page, and I don't have any idea to fix it!
Here is the code:
$('.classname').on ("click" ,function() {
var newpage = window.open('','_blank','');
newpage.$('html').html('my html elements are here');
});
Document is not a function to use parameters in it.
Else you can not use open and close function with document.
I'm showing url path for every page showing where the user is exactly. Like if user came to home->mobile->design then I'm showing user path like "home/mobile/design". everything is working fine but for mobile I have to hide content between home and design like home/.../design. I'm not sure how to implement this. Can someone help.... Thanks for your help in advance.
EDIT:
New example with toggling content:
var url = 'home/mobile/design';
var start = url.indexOf('/');
var end = url.lastIndexOf('/');
var finalString = url.substring(0,start+1) + '...' + url.substring(end, url.length);
$('#myURL').text(finalString);
$('#myURL').click(function(){
if(!$('#myURL').hasClass('toggle')){
$('#myURL').text(url);
$('#myURL').addClass('toggle');
}else{
$('#myURL').text(finalString);
$('#myURL').removeClass('toggle');
}
})
https://jsfiddle.net/2mq0dwbd/1/
This code will do what you want:
var url = 'home/mobile/design';
var start = url.indexOf('/');
var end = url.lastIndexOf('/');
alert(url.substring(0,start+1) + '...' + url.substring(end, url.length))
This code will account for another variants as well, if you have more "sections" inside it will only take the first one and the last one:
home/some/deep/section/goes/here
result:
home/.../here
You can play with it and modify it to meet your particular needs, of course.
Hope it helps!
Fiddle:
https://jsfiddle.net/2mq0dwbd/
In case you don't want to use slice/substring you can use a regex which results in a smaller amount of code:
var test = 'home/mobile/design';
test.replace(/\/.*\//, '/.../'); // home/.../design
It also works for different versions:
var test2 = 'home/mobile/design/test';
test2.replace(/\/.*\//, '/.../'); // home/.../test
I'm using jscript to load a string in to several elements of an array, then display the useful element in html.
There's a pulldown menu that causes the string to change. So, I need the function to be re-run when that happens.
I have been able to successfully display the element using window.onload
and, I have been able to successfully display the element AFTER the pulldown menu has been changed.
But, I can't seem to display the element with window.onload and subsequently after item.onchage
If anyone has any suggestions, I'd be grateful.
Here is the code that works for window.onload
window.onload = function() {
var selectedOptionId = jQuery('select').val();
var optionPartNumber = jQuery('input[name="OptID_' + selectedOptionId + '"]').val();
//loads the string in to an array and returns the 2nd element
var optionPartNumber = optionPartNumber.split(".")[1];
document.getElementById("MASNUM").innerHTML=optionPartNumber;
}
Here is the code that works for pulldown.onchange
jQuery(function(){
jQuery('.dropdownimage-format select').on('change', function(){
var selectedOptionId = jQuery('select').val();
var optionPartNumber = jQuery('input[name="OptID_' + selectedOptionId + '"]').val();
var optionPartNumber = optionPartNumber.split(".")[1];
document.getElementById("MASNUM").innerHTML=optionPartNumber;
});
In both cases, the element is displayed in html by
<a id="MASNUM">
I can't imagine this is very hard but i've been trying to figure out the best way to do this and honestly im completely lost. Now im getting frustrated so it would be great if someone who knows how to do this exactly could help me out.
I need a textbox I can embed into my html script, that will open different links depending on the users input text.
So in english here is the basics of what I need. A working script would be very much appreciated for I am stumped.
* stands for “any characters”
If text input contains bbb open link htttp://example1.com/bbb
otherwise
If text input contains *zzz* open link htttp://example2.com/something-predefined*zzz*
otherwise
If text input contains *xxx* open link htttp://example3.com/something-predefined*xxx*
otherwise
If text input contains * open link htttp://example3.com/*
Pseudocode:
function parmatch(input):
if input matches /^bbb$/
open 'http://example1.com/{input}'
return
if input matches /zzz/
open 'http://example2.com/something-predefined{input}'
return
if input matches /xxx/
open 'http://example3.com/something-predefined{input}'
return
MDN's article on regular expressions in JavaScript
the following code only example for what you ask. here change the <a href=""> for console.
<input type="text" id="picker" />
$('#picker').keyup(function() {
var value = $("#picker").val();
if(value == "1")
{
console.log("go to home");
}
else if(value == "2")
{
console.log("go to login");
}
else
alert("plz enter valid input");
})
For a more complete answer, I'd suggest the following:
var btn = document.getElementById('fire'),
input = document.getElementById('demo'),
output = document.getElementById('output'),
pageMap = {
'aaa' : 'pageA',
'bbb' : 'pageB',
'ccc' : 'pageC'
};
function loadPage (input, output, map) {
var v = input.value,
url = 'http://example.com/',
text = 'textContent' in document ? 'textContent' : 'innerText';
for (var i in map) {
if (map.hasOwnProperty(i) && v.indexOf(i) > -1) {
// the following shows the URL you'd end up with
output[text] = url + map[i];
// to *load* the URL, remove the above line,
// and uncomment the following:
// window.location = url + map[i];
}
}
}
btn.addEventListener('click', function(e){
e.preventDefault();
loadPage(input, output, pageMap);
});
JS Fiddle demo.
This answer is, however, not to encourage you to avoid learning JavaScript (as suggested in the comments to Ignacio's answer); please take the time to read, at least, the references I've supplied below.
References:
document.getElementById().
Element.addEventListener().
event.preventDefault().
for...in loop.
JavaScript object syntax.
window.location.