I Forked an NBA 2K Random Team picker from another user and was tweaking it to my needs. I am stumped on something probably simple for one of you. Thanks in advance.
When the "Randomize" button is clicked, the team "name" and "logo" display. I added a "roster" url to display as well but I want that url to be clickable in to a new tab/window. I can't seem to figure it out.
https://codepen.io/nick-c/pen/dNwMaZ
Below is just the html. I couldn't manage to post all the script and css.
<div class='container'>
<div class='title'>
<img src='http://fluidesign.co.uk/wp content/uploads/2016/12/NBA_2K17_logo.png'/>
</div>
<div class='team home'>
<h3>Home</h3>
<div class='logo'></div>
<div class='name'>?</div>
<div class='roster'>Click for Rosters</div>
<div class='random'>Randomize</div>
</div>
<div class='team away'>
<h3>Away</h3>
<div class='logo'></div>
<div class='name'>?</div>
<div class='random'>Randomize</div>
</div>
<div class='vs'>vs</div>
<div class='clear'></div>
</div>
You didn't "manage to post all the script and css"? Where's the difference in pasting it into a codepen or pasting it into the code snipped tool here on StackOverflow? Anyway...
You are currently just setting the link as a text in the line:
$(".home .roster").text(teams[index].roster);
But what you want to do is add it as a link:
$(".home .roster").html('Webpage URL');
Easy, huh? ;) See a working fork of your codepen here: https://codepen.io/anon/pen/xgmEOm
i think you want this
example
Related
I am working on an application that has a form on one of its pages. The form is enclosed in a bunch of nested div tags. It looks something like this:
<main id="main-body">
<div id="content-wrapper">
<div id="formContainer>
<div data-reactid=".0">
<div data-reactid=".0">
<div data-reactid=".0.0.1.$form">
<form id="myForm" data-reactid=".0.0.1.$form.1">
...
</form>
</div>
</div>
</div>
</div>
</div>
</main>
The trouble is that I can see the form on my webpage, and also through the 'View Source' function in my browser, but when I do an 'Inspect Element' to see the actual HTML being generated, I just see
<main id="main-body">
<div id="content-wrapper">
<div id="formContainer">
</div>
</div>
</main>
I can't see any of the HTML elements inside the div 'formContainer' when I do an 'Inspect Element', even though they are right there on the page. Any ideas as to why might this be? I need to get the form Id in Neoload, but Neoload just won't read it, since it's absent from the page's source.
Edit: Several of the div tags are using data-reactid=".0.0". The form element itself has data-reactid=".0.0.1.$form.1". Basically anything with react disappears. I know nothing of React. Could this be causing this issue? I have updated my code to match the original code more closely.
You are not closing the id="form-container"! A " is missing
I'm learning to make basic site for adding photos, and when I add pictures they are upside down. I have no idea how to reverse them. When I open them in photo gallery they are normal, not reversed, also when I open photo in paint and not doing anything (because its not reversed) I save it, then photos become normal on a website.
I couldn't fix that so I tried adding package with jQueryReverse plugin:
meteor add jjman505:jquery-rotate ,
to reverse pictures using button below images, but this option is still not working for me.
I have no idea what I did wrong and how to work it out, so I hope you can help me. I guess it's something basic I must have missed.
HTML:
<body>
<div class="container">
{{> images}}
</div>
</body>
<template name="images">
<div class="row">
{{#each images}}
<div class="col-xs-12 col-md-3" id="{{_id}}">
<div class="thumbnail">
<img class="js-image" src="{{img_src}}" alt="{{img_alt}}"/>
<div class="caption">
<button class="btn btn-info js-rotate-image">rotate </button>
</div>
</div>
</div>
{{/each}}
</div>
</template>
JS:
Images= new Mongo.Collection("images");
if (Meteor.isClient){
Template.images.helpers({images:
Images.find({}, {sort:{createdOn: -1, rating: -1}})
});
Template.images.events({
'click .js-rotate-image':function(event){
var image_id = this._id;
console.log(image_id);
$("#"+image_id).rotateLeft([angle=90]);
}
});
startup.js:
if (Meteor.isServer){
Meteor.startup(function(){
if (Images.find().count() == 0){
for (var i=1;i<22;i++){
Images.insert(
{
img_src:"img_"+i+".jpg",
img_alt:"image number "+i
}
);
}
I also tried. rotate(90) but didn't work as well.
I cut the code, but I hope I didn't cut anything important in solving that problem.
Thanks
Use this package. It is happening because of metadata image have.
https://github.com/ccorcos/meteor-clientside-image-manipulation
Noob here sorry. I'm trying to remove an ancestor when my WP loop returns an empty message with a specific class. Firefox is displaying as intended, removing the desired DOM, but Chrome is removing the targeted element and no ancestors.
Basic HTML markup:
<div id="content" class="container site-content">
<div id="primary" class="main-content">
<div id="main-box-1" class="main-box border-top">
<div class="main-box-inside">
<p class="no-modules-msg">No posts match your criteria. Please choose different options.</p>
</div>
</div>
<div id="main-box-2" class="main-box border-top ">
<h3 class="main-box-title">More Stuff</h3>
<div class="main-box-inside">
</div>
</div>
</div>
</div>
And my script:
(function($) {
$("document.body").ready(function() {
$("p.no-modules-msg")
.closest(".main-box")
.remove(".main-box")
})
})(jQuery);
It's working correctly in fiddle, but not on the live site...
https://jsfiddle.net/y90gtt6t/
The reason it's not working on your site, is because the documentation is quite clear, only the document has a ready handler
jQuery(document).ready(function($) {
$("p.no-modules-msg").closest(".main-box").remove()
});
Your use of "document.body" actually looks for an element like <document class="body"></document>, which it hopefully never finds.
I am using a Wordpress Theme (Incipiens) that has a show/hide Javascript to show a map on the contact page http://demo.themedev.me/wordpress_themes/incipiens/contact-us/
I want to use this function on a page multiple times to show/hide galleries.
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<a class="show_map" href="javascript:void(0)"></a>
<div class="map_container"><div class="thismap"><iframe>........</iframe></div>
</div>
I have this working but the call to the js opens all divs. I therefore put a unique div id round each gallery and slightly changed the javscript...
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<div id="silestone">
<div class="map_container">
[show_gallery width="124" height="124" galleryid="527"][/show_gallery]
</div>
</div>
</div>
It works but very oddly, sometimes the right one opens, sometimes the wrong one...not sure what i'm doing wrong, should I just have one javascript call that contains the ID's to all divs? If so how do I do this?
Since you have not shown the actual script you use for toggling, I assume you mean something like this (taken from the page) -
function (){
$(this).toggleClass('hide_map');
$('.map_container').slideToggle(400);
}
I would change that to -
function unhide(id){
$(this).toggleClass('hide_map');
$('#' + id).find('.map_container').slideToggle(400);
}
Does that work?
I am working on a youtube search engine. Everything works okay on the back end but I have hit a wall because Youtube adds a div like so:
<div class="item">
</div>
Around the video and removes my div. I have no way of pin pointing why this happens but I have read from other threads that this is not the first time someone has encountered a problem like this.
It would be much appreciated if you could help out!!
make another div - a 'victim' which the YT script would 'eat' and would leave what you need. For example, now you have:
<div id='pagewrapper'>
<div id='DivForYouTube'>
</div>
</div>
let's say you need to save 'DivForYouTube' and now YouTube destroys it and sets its own.
So my idea would be to create another (victim) div, which YouTube would eat and the neede one - would rest.
<div id='pagewrapper'>
<div id='DivForYouTube'>
<div id='specialVictimDivWhereYouSetYouTube'>
</div>
</div>
</div>
What whould you say?