I have been trying to use different ways to code this jQuery part, but it's not working. I do have a list of cards with the first one that has a default class. The goal would be that each time I click on the button that says "Set as Default", I could set the class "default" on the parent "bgCreditcard" and disable the button at the same.
My issue is that I tried toggleClass, but it was activating both the cards with the button "set as Default". I tried to disable with prop, but no luck too. Any ideas?
This is my HTML:
<div class="row">
<div class="col-12 colg-md-6 card bgCreditcard active">
<div class="card-body">
<div class="card-text">
<p>Card 1</p>
<button class="bg-btn bg-default bg-btn-disabled" disabled>Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 2</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 3</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
</div>
Js:
$('.bg-default').click(function(){
$('.bgCreditcard').each(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
});
Consider the following.
$(function() {
function clearDefault(card) {
$(card).removeClass("active");
$("button", card).prop("disabled", false).toggleClass("bg-btn-default bg-btn-disabled").html("Set as Default");
}
function addDefault(card) {
$(card).addClass("active");
$("button", card).prop("disabled", true).addClass("bg-btn-disabled").html("Default");
}
function setDefault(event) {
clearDefault($(".bgCreditcard.active"));
addDefault($(event.target).closest(".bgCreditcard"));
}
$(".bgCreditcard button").click(setDefault);
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-12 colg-md-6 card bgCreditcard active">
<div class="card-body">
<div class="card-text">
<p>Card 1</p>
<button class="bg-btn bg-default bg-btn-disabled" disabled="true">Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 2</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 3</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
</div>
You can try following code:
HTML:
<div class="row">
<div class="col-12 colg-md-6 card bgCreditcard active">
<div class="card-body">
<div class="card-text">
<p>Card 1</p>
<button class="bg-btn bg-default" disabled>Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 2</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 3</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
</div>
jQuery:
$(document).on('click', '.bg-btn' ,function(){
$('.bgCreditcard').removeClass('active');
$('.bgCreditcard').find('button').prop('disabled', false)
$('.bgCreditcard').find('button').removeClass('bg-btn-disabled')
$(this).closest('.bgCreditcard').addClass('active');
if($(this).closest('.bgCreditcard').hasClass('active')) {
$(this).prop('disabled', true);
$(this).addClass('bg-btn-disabled')
}
});
Related
I'm trying to swap a div's contents in a Bootstrap 5 row structure on hover. I'm currently trying to use Jquery for this but the method isn't working. It doesn't show any errors whatsoever, just doesn't work.
I don't care much if this can be done in JS or CSS, just need a solution that can replace div contents on hover. Additionally, if there could be a replacement animation (fade or slide) that'd be great.
$('.switch').hover(function() {
$(this).find('start1').hide();
$(this).find('switched').show();
}
, function() {
$(this).find('switched').hide();
$(this).find('start1').show();
}
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>
You were close with the JavaScript. this ends up being the .switch element, so you can use that as the context for the selector. Obviously you'll need to update the logic to handle all of the menu items.
$('.switch').hover(function() {
$('.start1', this).hide();
$('.switched', this).show();
}, function() {
$('.switched', this).hide();
$('.start1', this).show();
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>
Alternatively, here is a CSS-based approach
.switch:hover>.start1,
.switch:hover>.start2,
.switch:hover>.start3 {
display: none !important;
}
.switched,
.switched2,
.switched3 {
display: none;
}
.switch:hover>.switched,
.switch:hover>.switched2,
.switch:hover>.switched3,
.start1,
.start2,
.start3 {
display: block;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>
So I figured out a solution using CSS. Turns out the whole thing was much simpler than I thought.
Here's the Codepen.
HTML :
<div class="container my-5 px-5">
<div class="row switch gx-5 text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid hider mb-3 h-50" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid h-50 mb-3 hider" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid mb-3 h-50 hider" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
</div>
</div>
CSS :
.start1{
transition: background-color .25s;
}
.start2{
transition: background-color .25s;
}
.start3{
transition: background-color .25s;
}
.start1:hover{
background-color: #D86241;
}
.start2:hover{
background-color: #A1274C;
}
.start3:hover{
background-color: #771E3A;
}
.shower{
display: none;
color: white;
text-align: left !important;
}
.start1:hover .hider,
.start2:hover .hider,
.start3:hover .hider
{
display: none;
}
.start1:hover .shower,
.start2:hover .shower,
.start3:hover .shower
{
display: block;
}
I want to get the value in a single card selected by the user and post it to the backend
<div class="card-body">
<div class="swiper-container swipercards">
<div class="swiper-wrapper pb-4">
<div class="swiper-slide ">
<div class="card border-0 bg-default text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Visa</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide ">
<div class="card border-0 bg-warning text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Maestro</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>
Welcome AegisFor. It looks like you're using Swiper.js?
According to the docs, under events, here is how you determine the selected item in the carousel:
const swiper = new Swiper('.swiper', {
// ...
});
swiper.on('slideChange', function () {
console.log('slide changed', swiper.activeIndex);
});
https://swiperjs.com/swiper-api#events
You could get the values by referring to the slide's attributes, like this:
....
<div class="swiper-wrapper pb-4" >
<div class="swiper-slide " id="card-1" data-card-number="12345">
....
When you change slides, refer to the div that matches the activeIndex of the carousel:
var activeCard = document.getElementById("card-" + swiper.activeIndex);
Now you can get the card number:
var cardNumber = activeCard.getAttribute("data-card-number")
How you send it to your backend depends on what backed you have. You might do something similar to this:
fetch('http://example.com/card?card-number=' + cardNumber)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
The documentation at https://swiperjs.com/swiper-api is quite good. Remember to read the docs thoroughly before posting to SO.
I'm really new to jQuery and only managed to do basic CSS edits so far. I don't have access to the source code, but I need to iterate through each div with class '.card', grab the href of the hyperlink and apply the link to the each respective image so the user can click on the image to in addition to the text.
I tried the following but it had unintended consequences:
Successfully added hyperlink to each image, but was applied multiple times each
Value of hyperlink was 'undefined'
$(function() {
$(".card-img").each(function() { // For each card
var a = $(this).next('a'); // Find its associated anchor
$(".card-img").wrap(''); // And wrap the card image
});
});
Can anyone show me how to do this?
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-1.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 1</p>
</div>
<a class="cta card-cta" href="https://www.webinar1url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-2.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 2</p>
</div>
<a class="cta card-cta" href="https://www.webinar2url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-3.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 3</p>
</div>
<a class="cta card-cta" href="https://www.webinar3url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-4.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 4</p>
</div>
<a class="cta card-cta" href="https://www.webinar4url.com">Watch Webinar</a>
</div>
</div>
</div>
Loop over each .card div using .each() and then use $(this) to refer to the card div. Within the loop use .find() to both grab the href as well as .wrap() to wrap the image with the href:
$('.card').each(function() {
var href = $(this).find('a').attr('href');
$(this).find('img').wrap(``)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-1.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 1</p>
</div>
<a class="cta card-cta" href="https://www.webinar1url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-2.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 2</p>
</div>
<a class="cta card-cta" href="https://www.webinar2url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-3.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 3</p>
</div>
<a class="cta card-cta" href="https://www.webinar3url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-4.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 4</p>
</div>
<a class="cta card-cta" href="https://www.webinar4url.com">Watch Webinar</a>
</div>
</div>
</div>
I am trying to sort divs through their internal content in static HTML page. I am able to sort the content but how can i append the complete div back to page? Any suggestions?
var orderedDivs = $('.col-md-3 .card-body .card-title').sort(function(a, b) {
return String.prototype.localeCompare.call($(a).text().toLowerCase(), $(b).text().toLowerCase());
});
console.log(orderedDivs);
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<h6 class="card-subtitle">Designation1</h6>
<p class="card-text">Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">Mary Jane</h5>
<h6 class="card-subtitle">Designation2</h6>
<p class="card-text">Lorem Ipsum 2</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">David Rock</h5>
<h6 class="card-subtitle">Designation3</h6>
<p class="card-text">Lorem Ipsum 3</p>
</div>
</div>
</div>
Try this: apply sorting on col-md-3 divs and inside sorting apply localCompare on title and return the element.
replace sorted divs in the parent element, I have replaced it in body.
$(document).ready(function(){
var $sortedDiv = $('.col-md-3').sort(function(a,b){
var text1 = $(a).find('.card-body .card-title').text();
var text2 = $(b).find('.card-body .card-title').text();
return String.prototype.localeCompare.call(text1.toLowerCase(),text2.toLowerCase());
});
$('body').html($sortedDiv);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<h6 class="card-subtitle">Designation1</h6>
<p class="card-text">Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">Mary Jane</h5>
<h6 class="card-subtitle">Designation2</h6>
<p class="card-text">Lorem Ipsum 2</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">David Rock</h5>
<h6 class="card-subtitle">Designation3</h6>
<p class="card-text">Lorem Ipsum 3</p>
</div>
</div>
</div>
Add the whole html to a div and set paste back the content
$("document").ready(function(){
var orderedDivs = $('.col-md-3').sort(function(a, b) {
return String.prototype.localeCompare.call($(a).data('title').toLowerCase(), $(b).data('title').toLowerCase());
});
$("#content").html(orderedDivs);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="content">
<div class="col-md-3" data-title="John Doe">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<h6 class="card-subtitle">Designation1</h6>
<p class="card-text">Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-md-3" data-title="Mary Jane">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">Mary Jane</h5>
<h6 class="card-subtitle">Designation2</h6>
<p class="card-text">Lorem Ipsum 2</p>
</div>
</div>
</div>
<div class="col-md-3" data-title="David Rock">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">David Rock</h5>
<h6 class="card-subtitle">Designation3</h6>
<p class="card-text">Lorem Ipsum 3</p>
</div>
</div>
</div>
</div>
I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php